一、局部改变样式
三种方法:直接改变样式、改变className和改变cssText
1,改变className:
复制代码 代码示例:
document.getElementById(obj).className="…"
2,改变cssText:
复制代码 代码示例:
document.getElementById(obj).style.cssText="width:20px; border:solid 1px #f00;";
3,改变直接样式:
复制代码 代码示例:
document.getElementById(obj).style.backgroundColor="#003366″
二、全局改变样式
通过改变外链样式的的href的值实现网页样式的实时切换,即"改变模板风格"。
首先,赋予需要改变的目标一个id,例如:
复制代码 代码示例:
<link rel="stylesheet" type="text/css" href="firefox.css" />
调用方法:
复制代码 代码示例:
<span onclick="javascript:document.getElementById(css).href=ie.css\">点此改变样式</span>
通过dom元素的settitibute方法的class值进行设置。
1. 内联样式表的权值最高 1000 2. ID 选择器的权值为 100 3. Class 类选择器的权值为 10 4. HTML 标签选择器的权值为 1 CSS 优先级法则: A 选择器都有一个权值,权值越大越优先 B 当权值相等时,后出现的样式表设置要优于先出现的样式表设置 C 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式 D 继承的CSS 样式不如后来指定的CSS 样式 E 在同一组属性设置中标有“!important”规则的优先级最大 这是规定好的,自然不能打破
1.类选择器(class选择器)
基本使用:
.类选择器{
属性名: 属性值;
…}
2.id选择器
基本使用:
#id选择器{
属性名: 属性值;
…
}
3. html元素选择器
某个html元素{
属性名: 属性值;
…
}
4.通配符选择器
该选择器可以用到所有的html元素,但是其优先权最低
*{
属性名: 属性值;
…
}