您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章将为大家详细讲解有关javascript如何获取内联样式与嵌入式样式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
通过style属性设置背景图案
<!--html--> <div id="change"> change color </div>
/*css*/ #change { border: 1px solid black; width: 200px; height: 200px; text-align: center; line-height: 200px; }
//js change.style.backgroundColor="purple";
在侧边栏设置一个颜色选择器,将change的背景颜色设置为选择的颜色,此时颜色选择器的颜色是使用内联样式的方式添加的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> * { margin: 0; padding: 0; } .wrap { width: 220px; height: 200px; position: absolute; top: 300px; left: -172px; } .open-close { height: 45px; width: 48px; background: url("open-close.png") no-repeat; background-size: contain; border: 1px solid grey; border-left: none; position: absolute; top: 0; right: 0; z-index: 2; } .changer { height: 150px; width: 170px; position: absolute; top: 0; left: 0; border: 1px solid grey; text-align: center; padding-top: 8px; } .list > li { display: block; width: 36px; height: 36px; float: left; margin-left: 9%; margin-top: 10%; } #change { border: 1px solid black; width: 200px; height: 200px; text-align: center; line-height: 200px; } </style> </head> <body> <div class="wrap" id="wrap"> <!--html--> <div class="open-close" id="open"></div> <div class="changer"> <span>颜色选择器</span> <ul class="list"> <li class="color-orange" ></li> <li class="color-red" ></li> <li class="color-blue" ></li> <li class="color-black" ></li> <li class="color-green" ></li> <li class="color-pink" ></li> </ul> </div> </div> <div id="change"> change color </div> <script> var open = document.getElementById("open"); var wrap = document.getElementById("wrap"); var list = document.getElementById("list"); var change = document.getElementById("change"); var color_change = document.getElementsByTagName("li"); change.style.backgroundColor = "purple"; open.onmouseover = function () { wrap.style.left = 0 + "px"; }; open.onclick = function () { wrap.style.left = -172 + "px"; }; for (var i = 0; i < color_change.length; i++) { color_change[i].id = i; color_change[i].onclick = function () { change.style.backgroundColor = color_change[this.id].style.backgroundColor; } } </script> </body> </html>
问题:
当颜色选择器的颜色是使用嵌入式或者外部引入的方式添加时,javascript的style属性无效,获取不到颜色值。
解决方法:
javascript的style属性只能获取内联样式,对于外部引入样式和嵌入式样式需要用currentStyle属性。但是,currentStyle在Firefox和Chrome下不支持,需要使用如下兼容性代码:
HTMLElement.prototype.__defineGetter__("currentStyle", function () { return this.ownerDocument.defaultView.getComputedStyle(this, null); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .wrap { width: 220px; height: 200px; position: absolute; top: 300px; left: -172px; } .open-close { height: 45px; width: 48px; background: url("open-close.png") no-repeat; background-size: contain; border: 1px solid grey; border-left: none; position: absolute; top: 0; right: 0; z-index: 2; } .changer { height: 150px; width: 170px; position: absolute; top: 0; left: 0; border: 1px solid grey; text-align: center; padding-top: 8px; } .list > li { display: block; width: 36px; height: 36px; float: left; margin-left: 9%; margin-top: 10%; } .color-orange { background-color: orange; } .color-red { background-color: red; } .color-blue { background-color: blue; } .color-blank { background-color: black; } .color-green { background-color: green; } .color-pink { background-color: pink; } #change { border: 1px solid black; width: 200px; height: 200px; text-align: center; line-height: 200px; } </style> </head> <body> <div class="wrap" id="wrap"> <!--html--> <div class="open-close" id="open"></div> <div class="changer"> <span>颜色的选择</span> <ul class="list"> <li class="color-orange"></li> <li class="color-red"></li> <li class="color-blue"></li> <li class="color-blank"></li> <li class="color-green"></li> <li class="color-pink"></li> </ul> </div> </div> <div id="change"> change color </div> <script> HTMLElement.prototype.__defineGetter__("currentStyle", function () { return this.ownerDocument.defaultView.getComputedStyle(this, null); }); var open = document.getElementById("open"); var wrap = document.getElementById("wrap"); var list = document.getElementById("list"); var change = document.getElementById("change"); var color_change = document.getElementsByTagName("li"); change.style.backgroundColor="purple"; open.onmouseover = function () { wrap.style.left = 0 + "px"; }; open.onclick = function () { wrap.style.left = -172 + "px"; }; for (var i = 0; i < color_change.length; i++) { color_change[i].id = i; color_change[i].onclick = function () { change.style.backgroundColor = color_change[this.id].currentStyle.backgroundColor; } } </script> </body> </html>
关于“javascript如何获取内联样式与嵌入式样式”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。