转行学开发,代码100天——2018-04-11
通过JavaScript获取和修改HTML元素及CSS属性是其一个基本功能。对于CSS样式通常有行内样式,外部样式,内嵌样式之分。
如:
行内样式:
<div id="box" style="width: 100px;height: 100px;background:#ccc"></div>
外部样式:
<link rel="stylesheet" type="text/css" href="ccss.css">
内嵌样式:
<style type="text/css"> #div{width:100px;height:100px;background:red;} </style>
对于样式的获取也因其写入方式不同而有所区别:
对于行内样式的获取,用 obj.style.属性方式
如下面的一个获取和修改行内样式的案例:
<!DOCTYPE html> <html> <head> <title>JavaScript获取样式的方式</title> <script type="text/javascript"> //css样式获取和修改方法,两个参数时,获取;三个参数时修改 function css(obj){ alert(arguments[0]); if (arguments.length==2) { return arguments[0].style[arguments[1]]; }else { arguments[0].style[arguments[1]] = arguments[2]; } } //封装获取元素方法 function $(id){return document.getElementById(id);} window.onload =function () { var box = $(‘box‘); alert(css(box,"width"));//获取 css(box,"width","200px");//设置属性 } </script> </head> <body> <div id="box" style="width: 100px;height: 100px;background:#ccc"></div> </body> </html>
通过css函数技能获取样式也能修改样式,其前提是基于获取的HTML对象obj
function css(obj){ alert(arguments[0]); if (arguments.length==2) { return arguments[0].style[arguments[1]]; //获取样式 }else { arguments[0].style[arguments[1]] = arguments[2]; //修改样式 } }
为了使用方便,提升函数的通用性,可以将该函数进一步优化,增加obj,name,value参数
//css样式获取和修改方法,两个参数时,获取;三个参数时修改 function css(obj,name,value){ // alert(arguments[0]); //arguments[0]=obj if (arguments.length==2) { return obj.style[name]; //获取样式 }else { obj.style[name] = value; //修改样式 } }
非行间样式:obj.style.属性 方式并不适用与非行间样式
“好东西一般不兼容”
在用currentStyle() 与getComputedStyle() 获取非行间样式时需要考虑兼容性问题,而浏览器的兼容性问题一般都是通过if..else条件语句实现。
currentStyle() 兼容IE6、7、8
getComputedStyle()不兼容IE6、7、8
原文地址:https://www.cnblogs.com/allencxw/p/8796964.html
时间: 2024-10-08 21:36:30