js中如何调用css

js中如何调用css,第1张

呵呵 如果是用在 A 链接上面的话是不需要用JS的

<style>

a:link {color:#000}

a:visited {color:blue}

a:hover {color:red}

</style>

<a href="#"></a>

如果用在其他的元素上面 可以用

<style>

Normal {color:#000}

Hover {color:red}

</style>

<p onmouseover="thisclassName='Hover'" onmouseout="thisclassName='Hover'">文字</p>

js是无法直接修改css文件的,但可以通过取对象的方式修改对象的样式,通常有两种方法:

1、改变className,但首先在样式表中预设定样式类。

例如:documentgetElementById('obj')className='';

2、改变cssText。

例如:documentgetElementById('obj')styleheight='100px';

function getElementStyle(obj,attr){

if(objcurrentStyle){

return objcurrentStyle[attr];

}else{

return getComputedStyle(obj,false)[attr];

}

}

还有不懂的可以来扣群前面是三位数296,中间是三位数591,最后三位数290

请看下面,其中aasp是本页面的文件名页面本身获取style的值,然后动态调用不同的CSS样式表

<p><a href="aaspstyle=a">样式一</a></p>

<p><a href="aaspstyle=b">样式二</a></p>

<p><a href="aaspstyle=c">样式三</a></p>

-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下就不用加前缀。

以上就是关于js中如何调用css全部的内容,包括:js中如何调用css、如何用JS修改已加载的CSS样式表样式要详细的教程、js如何获取外部css属性等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9833251.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-02
下一篇 2023-05-02

发表评论

登录后才能评论

评论列表(0条)

保存