js 操作 css

Javascript 操作 Style 与CSS语法 不同点。

JavaScript 直接对 style 属性进行修改，来达到动态改变元素风格的目的。
假定元素(id1)的风格表单声明 :
style="font-family:Arial;font-size:12px;"
则您就可以在 JavaScript 中读取和修改风格属性
document.getElementById("id1").style.fontFamily = "Geneva";
document.getElementById("id1").style.fontSize = "14px";
注意:CSS 属性自身是 camelCased 的大小写是驼峰式的，即第一个词的首字小写，随后的每个词首字大写，而不是用连字符“-”进行连接的;如 document.getElementById("id1").style.font-family = "Geneva";这样写是错误的。

 

利用JavaScript可以在在几个层面上操作CSS
1.inlineStyle[element的style属性]
      无论是在ie还是ff中,element都有一个类型为Css2Properties的style属性,其属性对应着html中的style属性.这些值可以查询也可以被修改.注意通过的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.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节