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

实例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>

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

aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow

设置背景颜色
取消

　　

//

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • Javascript控制input输入时间格式的方法

    本文实例讲述了Javascript控制input输入时间格式的方法.分享给大家供大家参考.具体分析如下: 之前做了一个Javascript控制时间格式的输入,主要用到了keydown和keyup两个事件,但感觉写的很复杂而且还有bug. 今日了解了一下keypress事件与keydown和keyup的区别.大致如下(目前只了解这么多): keydown:按键按下的时候触发,通过event可以获取到keyCode,可以获取到文本框输入之前的值: keyup:按键弹出(松开)时触发,通过event可

  • 比较简单的javascript实现input双击后可以编辑

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • javascript和jquery修改a标签的href属性

    javascript: 复制代码 代码如下: document.getElementById("myId").setAttribute("href","www.xxx.com"); document.getElementById("myId").href = "www.xxx.com"; jquery: 复制代码 代码如下: $("#myId").attr("href"

  • javascript使用正则控制input输入框允许输入的值方法大全

    1.只允许输入数字 <input name="username" type="text" onkeyup="value=this.value.replace(/\D+/g,'')"> 2.只允许输入英文字母.数字和下划线(以下二种方法实现) <input name="username" type="text" style="ime-mode:disabled">

  • javascript实现依次输入input自动定焦

    javascript实现依次输入input自动定焦

    复制代码 代码如下: <html> <head> <script type="text/javascript">     function moveNext(object,index){         if(object.value.length==4){             document.forms[0].elements[index+1].focus();         }     }     function showResult(

  • JavaScript获取并更改input标签name属性的方法

    本文实例讲述了JavaScript获取并更改input标签name属性的方法.分享给大家供大家参考.具体实现方法如下: <input name="kk"></input> <script language="javascript"> // 这里用getElementsByTagName把所有的input对象取出来, //这是这个问题的关键性的地方,用ByTagName而不是ByName. var list = document.g

  • javascript 获取url参数和script标签中获取url参数函数代码

    url paramter: 复制代码 代码如下: //lastest: var getArgs=function() {//get url querystring var params=document.location.search,reg=/(?:^\?|&)(.*?)=(.*?)(?=&|$)/g,temp,args={}; while((temp=reg.exec(params))!=null) args[temp[1]]=decodeURIComponent(temp[2]);

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

    实例JavaScript代码 下面的这段代码中,我们通过select元素的name属性来设置具体要访问style的哪个属性(本例中为背景色),这样,这个函数就可以用来设置不同的CSS属性了. 复制代码 代码如下: <script type="text/javascript"> var d = document.getElementById("d"); function setProperty(){ var set = document.getElemen

  • JavaScript获取网页表单action属性的方法

    本文实例讲述了JavaScript获取网页表单action属性的方法.分享给大家供大家参考.具体如下: JavaScript获取网页表单的action属性,即要提交到的url地址,有时候需要提交到当前页面,则可能会设置action为空 <!DOCTYPE html> <html> <body> <form id="frm1" action="jb51.php"> First name: <input type=&

  • 用JavaScript获取页面文档内容的实现代码

    JavaScript的document对象包含了页面的实际内容,所以利用document对象可以获取页面内容,例如页面标题.各个表单值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js基础</title> </head> <body> <p>一. 用Documen

  • JavaScript获取当前页面上的指定对象示例代码

    JavaScript如何获取当前页面上的指定对象. 方法如下: 复制代码 代码如下: document.getElementById(ID) //获得指定ID值的对象 document.getElementsByName(Name) //获得指定Name值的对象数组 document.all[] //很智能的东东 不过非WEB标准 document.getElementsByTagName //获得指定标签值的对象数组 下面给出例子,只需把注释去掉直接运行就可看出效果. 复制代码 代码如下: <

  • 用javascript来控制 链接的target 属性的代码

    在HTML 4.0 Strict和XHTML 1.0 STRICT里不允许在<a>标签里使用target属性,这是一件令网页设计者懊恼的事.在过渡的规范里还是允许使用的.但通过一定的方法,我们可以解决这一问题. HTMl4.0规范里拿掉了target属性.但它添加了另外一个属性:rel.这个属性是用来指定包含链接的文档和所链接文档之间的关系的.规范里定义了其属性值(如:next,previous,chapter,section),在这些属性里大多数是用来定义一个大文档里各个小部分之间的关系的.

  • javascript获取URL参数与参数值的示例代码

    复制代码 代码如下: <script>                  function goto_url(url){                      var new_url = "http://shop.usteel.com/index.php?app=list_release";                      var d_date  = getParameter("date",url);                    

  • javascript 获取所有id中包含某关键字的控件的实现代码

    //获取某容器控件中id包含某字符串的控件id列表 //参数:容器控件.要查找的控件的id关键字.要查找的控件的标签名称 //返回值:查找到的控件id列表字符串,以逗号分割. 复制代码 代码如下: function GetIdListBySubKey(container,subKey,TagName) { var idList = ""; for(var i = 0; i < container.childNodes.length;i++) { if(container.chil

  • javascript获取下拉列表框当中的文本值示例代码

    近日碰到一个问题,就是需要将用户点击下拉列表当中某个选项后,将其所选的内容保存起来,例如下面的HTML代码: 复制代码 代码如下: <select onchange="isSelected(this.value);" id="city"> <option value="1">北京</option> <option value="2" >上海</option> <

  • Javascript实现滑块滑动改变值的实现代码

    Javascript实现滑块滑动改变值的实现代码

    最近做了一个关于税务的功能,值得一说的是本页面的滑块实现.大家都知道现实中的程序员大部分都是对于页面和美工不是很熟悉. 本人也是,但是本人比较喜欢自己动手来实现.废话不多说.上图: 实现结果: 部分js代码: 复制代码 代码如下: window.onload = function () { var oWin = document.getElementById("win"); var bDrag = false; var disX = disY = 0; oWin.onmousedown

  • javascript获取鼠标点击元素对象(示例代码)

    IE:var obj=document.elementFromPoint(event.clientX,event.clientY); 获取对象文本var a=obj.innerText FF里面要在事件里面添加对象才可以读取坐标. HTML:onclick="gj(event)" JS: 复制代码 代码如下: function gj(event){ var b=objobj=document.elementFromPoint(event.clientX,event.clientY);}

随机推荐