Question

如何使用JQuery或Javascript从CSS Style中删除属性。我想从下面的div样式中删除width属性。我尝试使用link，但它甚至没有帮助。我想从样式中删除的属性是一个没有ID关联但只有classname的div。

<div class="floatHeads" style="left: 0px; top: 59.34px; width: 443px; overflow: hidden; padding-right: 0px; padding-left: 0px; margin-top: 0px; position: absolute; z-index: 1001;">

我尝试过以下操作：

.floatHe .floatHeads {
    width: '';
}

也在下面试过

$('.floatHeads').css({width: ''});

以上任何内容都不适合我。请指导。

Answer 1

＆＃13;

function removeWidth(){
	$(".floatHeads").css("width", "")
}

function addWidth(){
	$(".floatHeads").css("width", "400")
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="floatHeads" style="left: 0px; top: 59.34px; width: 443px; overflow: hidden; padding-right: 0px; padding-left: 0px; margin-top: 0px; position: absolute; z-index: 1001; border: 1px solid black;"></div>

<button onclick=removeWidth()>
Remove width
</button>

<button onclick=addWidth()>
Add width
</button>

＆＃13;

Answer 2

这将有效

＆＃13;

$(document).ready(function(){
  $('.floatHeads').css('width','');
  console.log($('.floatHeads').attr('style'));
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="floatHeads" style="left: 0px; top: 59.34px; width: 443px; overflow: hidden; padding-right: 0px; padding-left: 0px; margin-top: 0px; position: absolute; z-index: 1001;">Placeholder</div>

＆＃13;

Answer 3

您可能需要将代码包装在ready()的处理程序中，以便在文档加载后运行它？

$(document).ready(function() {
    $('.floatHeads').css({width: ''});
});

Answer 4

使用普通的Javascript

＆＃13;

var x = document.querySelectorAll(".floatHeads");

for (var j = 0; j < x.length; j++) {
        console.log(x[j].style.width);
    }
var i;
    for (i = 0; i < x.length; i++) {
        x[i].style.width="";
    }

for (i = 0; i < x.length; i++) {
        console.log(x[i].style.width);
    }

＆＃13;

<div class="floatHeads" style="width:10px" >
  </div>

＆＃13;

Answer 5

您可以使用＆＃34;取消设置＆＃34;到＆＃34;重置＆＃34;继承价值。 MDN page on unset here

CloseActivityPanel

Answer 6

以下是查看其工作原理的另一种方法：

$(".rezult").html($(".floatHeads").attr("style"));

function myfunc(){

   $(".floatHeads").css("width", "");

   $(".rezult").html($(".floatHeads").attr("style"));
}

.floatHeads {
    background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="floatHeads" style="left: 0px; top: 59.34px; width: 443px; overflow: hidden; padding-right: 0px; padding-left: 0px; margin-top: 0px; position: absolute; z-index: 1001;">ewewew</div>
<button onclick="myfunc()" value="click me">remove width</button>
<div class="rezult"></div>

如何从Style属性中删除属性？

6 个答案: