js获取元素样式ele.style.attribute只能获取内敛样式的属性值!内部样式的属性值获取不了!怎么解决

js获取元素样式ele.style.attribute只能获取内敛样式的属性值!内部样式的属性值获取不了!怎么解决,第1张

HTMLElementprototype__defineGetter__("currentStyle", function () { 

    return thisownerDocumentdefaultViewgetComputedStyle(this, null); 

});

获取样式的时候吧style改为currentStyle

比如elementstylewidth改为elementcurrentStylewidth

通过attributes属性获取非原生的属性信息。attributes 属性返回指定节点的属性集。

例如:

1、定义一个节点,定义了一个非原生属性selname

<div id='test' selname = '222'></div>

2、获取该节点的非原生熟悉selname值

var d = documentgetElementById('test');//获取该节点

var str = dattributesselnamevalue;//获取该原生属性的值。

判断每一个元素,找出css("display")为block的元素

具体代码如下:

$(function(){

//取出所有div,并遍历

$("div")each(){

//判断每一个div,其css中display是否为block

if($(this)css("display")=="block"){

alert('您想要的元素');

}

};

});

可以通过getElementsByClassName方法来返回一个元素数组,你可以引用下标来返回具体的元素对象,比如:

var elements=documentgetElementsByClassName(“classname”);

elements[0];

CSS的样式分为三类: 

内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效。 

内部样式:是写在HTML的里面的,内部样式只对所在的网页有效。 

外部样式表:如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以css为后缀的CSS文件里,然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件。

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式对象([object CSSStyleDeclaration]) 

currentStyle是IE浏览器的一个属性,返回的是CSS样式对象

element指JS获取的DOM对象 

elementstyle //只能获取内嵌样式 

elementcurrentStyle //IE浏览器获取非内嵌样式 

windowgetComputedStyle(element,伪类) //非IE浏览器获取非内嵌样式 

documentdefaultViewgetComputedStyle(element,伪类)//非IE浏览器获取非内嵌样式 

注:Gecko 20 (Firefox 4 / Thunderbird 33 / SeaMonkey 21) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null),现在可以省略这个参数。

下面的html中包含两种css样式,id为tag的div是内嵌样式,而id为test的div样式为内部样式

<!doctype html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <meta name="Generator" content="EditPlus®">

    <meta name="Author" content="Yvette Lau">

    <meta name="keywords" content="样式,属性,元素,对象,原生">

    <meta name="description" content="HTMLElementprototype__defineGetter__("currentStyle", function () {     return thisownerDocumentdefaultViewgetC">

    <title>Document</title>

    <style>

      #test{

        width:500px;

        height:300px;

        background-color:#CCC;

        float:left;

      }

    </style>

  </head>

  <body>

    <div id = "test"></div>

    <div id = "tag" style = "width:500px; height:300px;background-color:pink;"></div>

  </body>

</html><script type = "text/javascript">

  windowonload = function(){

    var test = documentgetElementById("test");

    var tag = documentgetElementById("tag");

 

    //CSS样式对象:CSS2Properties{},CSSStyleDeclaration

    consolelog(teststyle); //火狐返回空对象CSS2Properties{},谷歌返回空对象CSSStyleDeclaration{} 

    consolelog(tagstyle); //返回CSS2Properties{width:"500px",height:"300px",background-color:"pink"}

    //elementstyle获取的是内嵌式的style,如果不是内嵌式,则是一个空对象

 

    consolelog(tagstylebackgroundColor);//pink

    consolelog(tagstyle['background-color']);//pink

    //获取类似background-color,border-radius,padding-left类似样式的两种写法啊

 

    consolelog(testcurrentStyle) //火狐和谷歌为Undefined,IE返回CSS对象

    consolelog(windowgetComputedStyle(test,null))//谷歌返回CSSStyleDeclaration{……} ,火狐返回CSS2Properties{……}

    consolelog(windowgetComputedStyle(test))

    //效果同上,但是在Gecko 20 (Firefox 4/Thunderbird 33/SeaMonkey 21) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null)

 

    consolelog(testcurrentStylewidth);//500px(IE)

    consolelog(windowgetComputedStyle(test)width); //500px;

    consolelog(windowgetComputedStyle(test)['width']);//500px;

    //documentdefaultViewgetComputedStyle(element,null)[attr]/windowgetComputedStyle(element,null)[attr]   

  }

</script>

在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下:

1

objstyle:这个方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style

type="text/css">里面的属性。

复制代码

代码如下:

<span

style="font-family:Arial;font-size:14px;"><!DOCTYPE

html

PUBLIC

“-//W3C//DTD

XHTML

10

Transitional//EN”

“>

可以直接用name这个属性取到的name的值。下面是个小例子。仅供参考:

<body>

    <div id="div" name="div" style="width:100px; height:100px; background:#ccc;"></div>

</body>

<script>

    var oDiv = documentgetElmentById('div');

    oDivonclick=function(){

        alert(oDivname);   //这个时候填出 div 

    };

</script>

正确使用判断对象是否存在应该用:if($("#id")length>0){}else{}使用jQuery 对象的属性 length 来判断,如果 > 0 就存在。或者 if($("#id")[0]){} else {} 或者直接使用原生的 Javascript 代码来判断: if(documentgetElementByIdx_x_xx_x("id")){} else {}或者var g = documentgetElementById;if (g('addrId_324') != null) { //判断是否存在这个id号,不存在则为null g('addrId_' + selAddressId)className = ''; } JQuery 判断某个属性是否存在 hasAttr在JQuery编码中,我们会判断元素是否存在某个属性比如是否包含 class="new"的样式呢JQuery判断就非常简单了,因为有hasClass这个方法 $("input[name=new]")hasClass("new") 即可判断这时就没有现成的方法了 如果存在某个属性 $("#aid")attr("rel") 会返回 rel的值,如果不存在 rel属性则会返回"undefined"undefined 就是 undefined类型 , if($("#aid")attr("rel")=="undefined") 这个判断可能不成立因为类型不相同建议使用 if(typeof($("#aid")attr("rel"))=="undefined") 即可判断JS对象是否拥有某属性两种方式,但稍有区别1,in 运算符123varobj = {name:'jack'};alert('name'inobj); // --> truealert('toString'inobj); // --> true可看到无论是name,还是原形链上的toString,都能检测到返回true。 2,hasOwnProperty 方法123varobj = {name:'jack'};objhasOwnProperty('name'); // --> trueobjhasOwnProperty('toString'); // --> false原型链上继承过来的属性无法通过hasOwnProperty检测到,返回false。

以上就是关于js获取元素样式ele.style.attribute只能获取内敛样式的属性值!内部样式的属性值获取不了!怎么解决全部的内容,包括:js获取元素样式ele.style.attribute只能获取内敛样式的属性值!内部样式的属性值获取不了!怎么解决、js 获取元素的非原生属性、如何用原生js获取元素display属性值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址:https://54852.com/web/9816241.html

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

发表评论

登录后才能评论

评论列表(0条)

    保存