
@import url("bcss");
这样a和b两个样式是叠加起来的,如果只想要b样式,那么只要把acss里的样式都清空,只加入@import url("bcss");就搞定了!在页面内用JS *** 作CSS除非用AJAX,但 *** 作页面内的样式的话,是可以的。 *** 作样式分为改变直接样式,改变className和改变cssText三种
一、局部改变样式
调用方法:
改变className
<div id="demo">测试</div>
<script>
documentgetElementById('demo')className="test";
</script>
改变直接样式
<div id="demo">测试</div>
<script>
documentgetElementById('obj')stylebackgroundColor="#003366";
</script>
二、全局改变样式
可以通过改变外链样式的的href的值实现网页样式的实时切换
<link rel = "stylesheet" type="text/css" id="css" href="firefoxcss" />
<span on click="javascript:documentgetElementById('css')href = 'iecss'">点我改变样式</span>通常我们将网页的样式和内容分开,样式放在css文件,内容放在html文件,当html文件需要用到样式的时候,直接引用css中定义的样式就可以了。其实JavaScript也能使用css文件或直接改变样式的属性来动态的改变网页的样式。
1、JavaScript设置内联样式
改变样式最直接的方法就是改变元素节点的style属性。如:
myElementsytlecolor = “red”;
myElementsytleleft = “40px”;
myElementsytlebackgroundRepeat = “repeat-x”;
JavaScript设置内联样式时,采用和css设置样式一样的风格。如设置myElement的color属性时,我们可以赋值任何在css中可以用的值,所以这里除了可以使用”red”,还可以使用”blue”, ”yellow”或十六进制的”#ff0000”。
另外用JavaScript改变网页的属性还需要注意2点:
l JavaScript中采用驼峰命名法:在css中,属性名中的单词之间是用横杠隔开,如font-weight, background-color。但在JavaScript中,横杠可能被认为是减号,所以采用驼峰命名法,单词之间不用横杠,如font-weight在JavaScript中应该写成fontWeight;而background-color写成backgroundColor。
l JavaScript中属性值为字符串:在css中,属性值都写在双引号中,即要用字符串来给css相关属性赋值,同样当属性值有单位时,我们需要将单位也写在字符串中。
2、JavaScript设置外部样式
当你需要改变的样式已经在css文件中定义了,我们也可以用JavaScript直接用定义好的css样式。如下格式:
myElementclassName = “someCSSclass”;
同样需要注意几点:
l 不要将className写成class,因为class是JavaScript保留的关键字,我们不能使用。
l 将定义在css中的样式直接赋值给className,就能改变myElement元素的样式。
l 当要删除元素的样式,可以给className属性赋值为空。如:
myElementclassName = “”;
教程网 站-秒秒学上的JavaScript课程有一个章节专门讲解JavaScript改变样式的内容,可以看看,希望对你有帮助。-moz-, -webkit-, -o-这些都是浏览器前缀。box-shadow才是css样式。
通过js获取css的box-shadow的方法:
div
{
box-shadow: 10px 10px 5px #888888;
}
js方法:
documentdiv[0]stylebox-shadow = "12px 11px 5px #888888;";
常用前缀和浏览器的对应关系如下:
Firefox: -moz-
Chrome, Safari: -webkit-
Opera: -o-
IE: -ms-
css标准中各个属性也要经历从草案(WD)到推荐(REC)的过程,css3中的属性进展都不一样。浏览器厂商在标准尚未明确情况下提前支持会有风险,同时也会出现有的浏览器厂商支持的好,有的支持的不好,所以就用厂商前缀加以区分。
PPK建议如果已成为REC或接近REC的属性,厂商如果完全实现了w3c的test case,就不用加厂商前缀,像border-radius在ie9下就不用加前缀。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)