Javascript获取标签ID改变style属性的代码

 更新时间:2012年08月24日 17:24:30   作者:  
下面的这段代码中,我们通过select元素的name属性来设置具体要访问style的哪个属性(本例中为背景色),这样,这个函数就可以用来设置不同的CSS属性了
实例JavaScript代码
下面的这段代码中,我们通过select元素的name属性来设置具体要访问style的哪个属性(本例中为背景色),这样,这个函数就可以用来设置不同的CSS属性了。
复制代码 代码如下:

  <script type="text/javascript">
  var d = document.getElementById("d");
  function setProperty(){
  var set = document.getElementById("setColor");
  var optionValue = set.options[set.selectedIndex].value;
  d.style.backgroundColor = optionValue;
  }
  function reset(){
  d.style.backgroundColor = "transparent";
  }
  </script>

HTML代码
本例的HTML代码比较简单,一个select元素用来罗列出来可选的背景色。而按钮则负责触发事件,调用函数。
复制代码 代码如下:

  <select id="setColor">
  <option value="aqua">aqua</option>
  <option value="black">black</option>
  <option value="blue">blue</option>
  <option value="fuchsia">fuchsia</option>
  <option value="gray">gray</option>
  <option value="green">green</option>
  <option value="lime">lime</option>
  <option value="maroon">maroon</option>
  <option value="navy">navy</option>
  <option value="olive">olive</option>
  <option value="purple">purple</option>
  <option value="red">red</option>
  <option value="silver">silver</option>
  <option value="teal">teal</option>
  <option value="white">white</option>
  <option value="yellow">yellow</option>
  </select>
  <button onclick="setProperty();return fales;">设置背景颜色</button>
  <button onclick="reset();return fales;">取消</button>

效果
选择颜色后点击按钮“设置背景颜色”。

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

相关文章

  • js 下拉菜单点击旁边收起实现(踩坑记)

    js 下拉菜单点击旁边收起实现(踩坑记)

    这篇文章主要介绍了js 下拉菜单点击旁边收起实现(踩坑记),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • JS也玩OO继承

    JS也玩OO继承

    JS也玩OO继承...
    2007-01-01
  • 微信小程序开发打开另一个小程序的实现方法

    微信小程序开发打开另一个小程序的实现方法

    这篇文章主要介绍了微信小程序开发打开另一个小程序的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • js字符串处理之绝妙的代码

    js字符串处理之绝妙的代码

    这篇文章主要介绍了js字符串处理之绝妙的代码,包括字符串去重、将字符放在对象中遍历拼接出字符串、把字符串的奇数位和偶数位分别提取到两个数组中、将两个数组按奇数位和偶数位插入拼接为字符串,有时候需要对字符进行处理的时候可以用得到
    2019-04-04
  • js URL参数的拼接方法比较

    js URL参数的拼接方法比较

    请求的URL后面带参数在项目中是很常见的,常用在的地方比如跳转到新页面或者请求CGI等
    2012-02-02
  • 16个最流行的JavaScript框架[推荐]

    16个最流行的JavaScript框架[推荐]

    这篇文章列举了当下最流行的16个 JavaScript 框架,既包含 jQuery 和 Mootools 等常规框架,也有Zepo这种支持智能手机触摸功能的移动JavaScript框架,如果你有更好的框架推荐,欢迎与我们分享。
    2011-05-05
  • 图片自动更新(说明)

    图片自动更新(说明)

    图片自动更新(说明)...
    2006-10-10
  • JMenuTab简单使用说明

    JMenuTab简单使用说明

    JMenuTab简单使用说明参数
    2008-03-03
  • Javascript 强制类型转换函数

    Javascript 强制类型转换函数

    javascript是弱类型的语言,所以强制类型转换还是比较重要的,下面看一下它的几个强制转换的函数
    2009-05-05
  • js实现窗口全屏示例详解

    js实现窗口全屏示例详解

    这篇文章主要为大家详细介绍了js实现窗口全屏示例,包含全屏事件、退出全屏事件等,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09

最新评论