JS通过.style.属性修改对象样式的可行度分析

1.内嵌样式

html:

        <div style="top: 100px;left: 100px;background-color: #000;"></div>
        <div style="top: 130px;left: 130px;background-color: #f00;"></div>
        <div style="top: 160px;left: 160px;background-color: #009;"></div>

JS:

       var divs=document.getElementsByTagName('div');

       for(var i=0;i<divs.length;i++)
      {
        divs[i].οnmοusedοwn=function(e){
        var event=window.event || e;//window.event支持IE;参数e支持非IE
        var mouseX=event.clientX;//鼠标坐标x
        var mouseY=event.clientY;//鼠标坐标y
        var divX=parseInt(this.style.left);//层的x坐标
        var divY=parseInt(this.style.top);//层的y坐标
        alert(this.style.left);//此时弹出的left值即为当前div在按下鼠标后的值
        alert(parseInt(this.style.left));//此时也弹出left值
 xx=mouseX-divX; yy=mouseY-divY; this.style.zIndex='10'; }


2.通过class选择样式

html:

       <div class="color1"></div>
       <div class="color2"></div>
       <div class="color3"></div>
css:
div {
	position: absolute;
	width: 170px;
	height: 240px;
	opacity: 0.6;
        filter:alpha(opacity:60);
	z-index: 5;
}
.color1 {
	top: 100px;
	left: 100px;
	background-color: #000;
}
.color2 {
	top: 130px;
	left: 130px;
	background-color: #f00;
}
.color3 {
	top: 160px;
	left: 160px;
	background-color: #009;
}

JS:
       var divs=document.getElementsByTagName('div');

       for(var i=0;i<divs.length;i++)
      {
        divs[i].οnmοusedοwn=function(e){
        var event=window.event || e;//window.event支持IE;参数e支持非IE
        var mouseX=event.clientX;//鼠标坐标x
        var mouseY=event.clientY;//鼠标坐标y
        var divX=parseInt(this.style.left);//层的x坐标
        var divY=parseInt(this.style.top);//层的y坐标
        alert(this.style.left);//此时弹出为空
        alert(parseInt(this.style.left));//此时弹出NAN  当前无法获得样式中的属性值
xx=mouseX-divX; yy=mouseY-divY; this.style.zIndex='10'; }

3.通过ID选择样式

html:

      <div id="color1"></div>
      <div id="color2"></div>
      <div id="color3"></div>

css如上

JS:

  var divs=document.getElementsByTagName('div');

       for(var i=0;i<divs.length;i++)
      {
        divs[i].οnmοusedοwn=function(e){
        var event=window.event || e;//window.event支持IE;参数e支持非IE
        var mouseX=event.clientX;//鼠标坐标x
        var mouseY=event.clientY;//鼠标坐标y
        var divX=parseInt(this.style.left);//层的x坐标
        var divY=parseInt(this.style.top);//层的y坐标
        alert(this.style.left);//此时弹出为空
        alert(parseInt(this.style.left));//此时弹出NAN  当前无法获得样式中的属性值
xx=mouseX-divX;
yy=mouseY-divY;
alert(this.style.zIndex);//第一次点击弹出空值,以后每次点击都会弹出相应的Z-index值 (z-index为 div Tag样式中的属性)
}


总结:

1.通过.style.属性只能作用于内嵌式的样式。可获取内嵌样式和Tag样式的全部属性;

2.通过id或class来选择样式的不能通过.style.属性或许样式信息,具体怎样获取待日后学习更深后再叙。



PS:告别手写的日志的第一天,想它。

      慢慢适应博客也日志,要跟上潮流啊喂!!

发布了4 篇原创文章 · 获赞 7 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览