JS里添加样式的方法：
1、首先，要创建标签，使用document.createElement函数，如图创建div标签。使用其className设置class，id设置id，style设置样式。
2、样式的设置也可以分项进行。如图是分项设置其left，top，display，position，width几个样式。
3、通过设置标签的innerHTML属性可以直接给其添加子标签以及子标签的样式。当然，也可以分项分层添加标签。
4、设置好标签（如图是div标签，变量名box），使用document.body.appendChild添加标签到body当中。
5、标签添加以后，依然可以修改样式，如图是使用document.getElementById方法根据id获取标签，修改style。
6、标签添加以后，也可以给其添加和删除event处理。如图是使用jQuery给id为img-preview-box的标签添加hover鼠标经过的处理。
以下示例使用css3 滤镜filter属性，通过高级浏览器测试可用。
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>css3滤镜测试</title>
<style type="text/css">
a{ font-size:2em
margin:100px auto
text-decoration: nonedisplay:blockwidth:300pxtext-align:center
}
a:hover {
filter: blur(2px)
-o-filter: blur(2px)
-ms-filter: blur(2px)
-moz-filter: blur(2px)
-webkit-filter:blur(2px)
}
</style>
</head>
<body>
<a href="#" title="我要变了">鼠标放上来看看</a>
</body>
</html>
找jquery插件吧，稳定很多，又兼容各大浏览器！很好用的哦！(function($){
$.fn.shadow=function(options){
var opts=$.extend({},$.fn.shadow.defaults,options)
return this.each(function(index){
$.fn.shadow.show(this,opts)
})
}
$.fn.shadow.show=function(el,opts){
var OffsetLeft=$(el).offset().left
var OffsetTop=$(el).offset().top
for(var i=0i<opts.slicesi++){
$(el).clone().css({
'position':'absolute',
'left':OffsetLeft+(i+1)*opts.xstep,
'top':OffsetTop+(i+1)*opts.ystep,
'margin':0,
'opacity':opts.opacity,
'zIndex':opts.zIndex
}).addClass('extra_shadow').prependTo('body')
}
}
$.fn.sdclose=function(){
$('.extra_shadow').remove()
}
$.fn.shadow.defaults={
slices:5, //复制的条数，用于增加阴影度
opacity:0.1, //透明度设置
zIndex:-1,//Z轴设置
xstep:1,//X轴增量，用于改变阴影的方向
ystep:1 //Y轴增量，用于改变阴影的方向
}
})(jQuery)
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>（引用jquery文件）
<script type="text/javascript" src="js/jquery.font.shadow.js"></script>（上面的代码是这个插件）
用这个插件吧！使用方法：
<h3 style="line-height:25pxfont-size:14px">我是sunny</h3>
<script type="text/javascript">
$(function(){
$('h3').shadow({xstep:1,ystep:1})
})
</script>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）