Javascript 操作 Style 与CSS语法 不同点。
利用JavaScript可以在在几个层面上操作CSS
2.computeStyle[完整的css属性列表]
ff中通过windoiw对象的getComputedaStyle(),方法得到的是一个只读的Css2Properties,它完整的反映了待查询元素的属性.该方法有两个参数,第一个是待查询element的引用,第二个是伪类如:after等,ff中要求提供两个参数,一般吧第二个设为null; 在ie中每个元素都有一个currentStyle属性来对应ff中的getComputedStyle()指向该element的完整属性列表.
3.操作element的class属性
对于element的css属性class在JavaScript中对应的是className,值得注意的是一个元素可以有多个class,在查询和更改时都要注意进行判断. //CSSClass.js:一个用来操作class的实用类 var CSSClass = {}; //创建命名空间 http://www.ukseo.cn CSSClass.has = function(e, c) //判断给定的元素是否含有该类,有返回true { if (typeof e == "string") e = document.getElementById(e); // 如果传入的的是字符串则则把它当作元素id var classes = e.className; if (!classes) return false; if (classes == c) return true; // 只有一个class return e.className.search(" \\b" + c + " \\b") != -1; }; CSSClass.add = function(e, c) { if (typeof e == "string") e = document.getElementById(e); if (CSSClass.is(e, c)) return; // 如果已经存在该类直接返回 if (e.className) c = " " + c; e.className += c; };
CSSClass.remove = function(e, c)
{ if (typeof e == "string") e = document.getElementById(e); // element id // Search the className for all occurrences of c and replace with "". // \s* matches any number of whitespace characters. // "g" makes the regular expression match any number of occurrences e.className = e.className.replace(new RegExp(" \\b"+ c+" \\b\\s*", "g"), "");
};
4.直接操作外部的式样文件
有两种方法可以直接操作外部式样表.(1)在html中的link和script在javaScript中有一个disabled属性[html中没有对应的属性],可以设置它为true或false来启用或停用对应的式样表文件.(2)方法可以直接操作式样表,但是较为复杂和不常用,详细信息参看 JavaScript: The Definitive Guide, 5th Edition 16.6.2节 |
js 操作 css
最新推荐文章于 2023-03-13 11:20:13 发布