JS通过.style.属性修改对象样式的可行度分析
2016-12-23 19:40
543 查看
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].onmousedown=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在按下鼠标后的值
2.通过class选择样式
html: <div class="color1"></div>
<div class="color2"></div>
<div class="color3"></div>css:
JS:
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].onmousedown=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);//此时弹出为空
yy=mouseY-divY;
alert(this.style.zIndex);//第一次点击弹出空值,以后每次点击都会弹出相应的Z-index值 (z-index为 div Tag样式中的属性)
}
总结:
1.通过.style.属性只能作用于内嵌式的样式。可获取内嵌样式和Tag样式的全部属性;
2.通过id或class来选择样式的不能通过.style.属性或许样式信息,具体怎样获取待日后学习更深后再叙。
PS:告别手写的日志的第一天,想它。
慢慢适应博客也日志,要跟上潮流啊喂!!
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].onmousedown=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].onmousedown=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].onmousedown=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:告别手写的日志的第一天,想它。
慢慢适应博客也日志,要跟上潮流啊喂!!
相关文章推荐
- js通过标签元素id,用document.getElementById().style设置标签元素的css属性
- JS中style属性控制,如何通过JS给一元素添加CSS相关属性
- js获取指定节点对象的样式属性的值的封装函数(兼容ie、Opera和符合w3c标准浏览器)
- 通过通过分别配置 PagerStyle 和 PagerSettings 属性,自定义页导航的样式和设置
- 简单演示对象间通过BLOCK回调修改属性的功能
- 网页中通过js修改img的src属性刷新图片时,图片缓存问题现象表述及问题解决
- 网页中通过js修改img的src属性刷新图片时,图片缓存问题现象表述及问题解决
- 08、通过自定义依赖属性,用 StateTrigger 修改全局主题样式
- js对象属性 通过点(.) 和 方括号([]) 的不同之处
- js通过prototype为对象注入属性
- JS通过分析userAgent属性来判断浏览器的类型及版本
- js修改CSS样式表代码_JavaScript CSS Style属性对照表
- CSS list-style修改列表属性控制li标签样式
- JS中的style对象中的display属性和visibility属性的区别
- 网页中通过js修改img的src属性刷新图片时,图片缓存问题现象表述及问题解决
- 网页中通过js修改img的src属性刷新图片时,图片缓存问题现象表述及问题解决
- CSS list-style修改列表属性控制li标签样式
- 通过js来修改div的style(background,border,。。。。。。。)
- js外部样式和style属性的添加移除
- JS获取元素属性、样式getComputedStyle()和currentStyle方法兼容性问题