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需再刷新一下页面才能执行]
下面的这段代码中，我们通过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需再刷新一下页面才能执行]
相关文章
表格头固定而列可滚动的效果...2007-11-11
这篇文章主要介绍了一次记住JavaScript的6个正则表达式方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-02-02
这篇文章主要介绍了微信小程序云开发之云函数的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
every方法确定数组中的每一项的结果都满足所写的条件的时候,就会返回true,否则返回false,这篇文章主要给大家介绍了关于JavaScript数组every方法应用场景的相关资料,需要的朋友可以参考下2022-12-12
除Console.log()外更多的Javascript调试命令
本篇文章给大家介绍了除Console.log()外更多的Javascript调试命令，方便大家更多环境下的JS调试，学习下吧。2018-01-01
文件上传,可以说是我们在项目中最常用的功能之一,文件上传一般有两种形式：点击上传和拖拽上传,而上传的内容,又大体包括：文件和文件夹,本文给大家介绍了JavaScript实现文件的拖拽上传功能的方法,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了微信小程序组件传值图示过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
我在写这篇文章之前花了2个多小时在弄正则表达式，下为大家介绍下具体的实现思路，感兴趣的朋友可以参考下2013-10-10
HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一块画布,我们可以通过调用脚本在Canvas上绘制任意形状,甚至是制作动画,这篇文章主要给大家介绍了关于用几十行js实现很炫的canvas交互特效的相关资料,需要的朋友可以参考下2021-11-11
下面小编就为大家带来一篇原生js实现仿window10系统日历效果的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
最新评论