js设置css怎么使用

html-css035

js设置css怎么使用,第1张

-moz-, -webkit-, -o-这些都是浏览器前缀。box-shadow才是css样式。

通过js获取css的box-shadow的方法：

div

{

box-shadow: 10px 10px 5px #888888

}

js方法：

document.div[0].style.box-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下就不用加前缀。

像这种效果，你要想知道，

已经下载下来，你拆开看一下就知道了。

说说原理，这里并不是纯css3，，只是用css3定义好动画，

@-moz-keyframes tips {

0% {box-shadow: 0px 0px 0px #f00}

25% {box-shadow: 0px 0px 8px #f00}

50% {box-shadow: 0px 0px 0px #f00}

100% {box-shadow: 0px 0px 8px #f00}

}

然后，js在切屏后，用Js来触发这一个样式，这个样式调用了刚才定义的动画。

.tips {

-webkit-animation:tips 1s

-moz-animation:tips 1s

}

当然css3是可以做的，只是用纯css3，就没办法像这样可以拖动切屏，这个是需要js或者jq来完成。。。

~如果你认可我的回答，请及时点击【采纳为满意回答】按钮

~~手机提问的朋友在客户端右上角评价点【满意】即可。

~你的采纳是我前进的动力

~~O(∩_∩)O，记得好评和采纳，互相帮助，谢谢。

不知道你要做什么 通过js直接设置这个值没意义

如果只是要实现对象旋转 只需要在触发事件中动态调整 对象的 class

比如一个图片当鼠标移上去之后 图片旋转

<img class='onmoveout' onmousein="this.setAttribute('class','onmovein') onmouseout="this.setAttribute('class','onmoveout')">