首页 > 代码库 > js操作css样式和class

js操作css样式和class

2024-11-02 19:43:39   209人阅读

Javascript 操作 Style

document.getElementById("id1").style.fontFamily = "Geneva";document.getElementById("id1").style.fontSize = "14px";

注意:CSS 属性自身是 camelCased 的大小写是驼峰式的，即第一个词的首字小写，随后的每个词首字大写，而不是用连字符“-”进行连接的;如

利用JavaScript可以在在几个层面上操作CSS

1.style属性的值

e.style.left = "300px";var totalMarginWidth = parseInt(e.style.marginLeft) +parseInt(e.style.marginRight);

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.cnCSSClass.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样式和class


联系
我们