jQuery根据style筛选元素

<div style="display:block;">
    <input/>
</div>
<div style="display:none;">
    <input/>
</div>

如上的两个input元素，获取两个input元素，常规的按index、id或判断等形式也能实现，但是很麻烦，可以用以下办法

$(".div[style='display:block;'] input")

注意“;”分号不能省略.

这里的style是指元素的style属性，并非css属性，否则如下改变之后同样的方法获取元素会失效

if($(this).css("display")=='none'){
    $(this).attr('display','block');
}else{
    $(this).css('display','none');
}

如要操作css属性，可选用attr方法，如

if($(this).css("display")=='none'){
    $(this).attr('style','display:block;');
}else{
    $(this).attr('style','display:none;');
}

如欲详细了解css属性与元素属性，请移步@参考文章，原文全文如下

 使用jquery的.attr( )方法去给div隐藏，这样写的 $("#div_id").attr("display","none"),发现并没有生效，但是docunment.getElementById("div_id").style("display","none")就生效了。 而且再调试的时候发现，使用$("#div_id").attr("width","180")也是生效的....

 

原因：应该写成 $("#div_id").css("display","none")  

            display属于css中的属性，而不属于该div的属性，而width既是div的属性，也是css的属性，所以会出现上面的情况，以后再使用jquery去修改某一标签的style 使用css( )，修改元素的属性  使用attr( ）。

 

总结：

attr()： 获取和修改的是元素的属性，如img的src属性和alt属性，a链接的href属性等等。

css() ：获取和修改的是样式里面的属性，即是style里面的属性。
---------------------
作者：chdyiboke
来源：CSDN
原文：https://blog.csdn.net/chdyiboke/article/details/82700001
版权声明：本文为博主原创文章，转载请附上博文链接！

View Code