2017-01-04 2 views
1

Как удалить свойство из стиля CSS с помощью JQuery или Javascript. Я хочу удалить свойство width из нижнего div-стиля. Я пробовал работать с link, но это даже не помогло. Свойством, которое я хочу удалить из стиля, является div, у которого нет идентификатора, но имеет только имя класса.Как удалить свойство из атрибута Style?

<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: ''}); 

Ничего из выше работал для меня. Пожалуйста, направляйте.

+0

@FlyingGambit: Я не пытаюсь сделать это из ny селектор или компонент. Я хочу сделать это из Div – sTg

+0

У меня нет никакого идентификатора для div, и я не могу его поместить. Таким образом, вышеупомянутый не поможет. – sTg

+3

'$ (". FloatHeads "). Css ({" width ":" "});' –

ответ

0

Возможно, вам потребуется обернуть свой код в обработчик для ready(), чтобы он работал после загрузки документа?

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

Это будет работать

$(document).ready(function(){ 
 
    $('.floatHeads').css('width',''); 
 
    console.log($('.floatHeads').attr('style')); 
 
})
<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>

0

С простой Javascript

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); 
 
    }
<div class="floatHeads" style="width:10px" > 
 
    </div>

+1

'document.querySelector' предоставит вам только один элемент. имейте это в виду. – Jai

+0

Да Вы правы. Я обновил anwser. – WitVault

0

Вы можете использовать «unset» для «reset» для унаследованного значения. MDN page on unset here.

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

2

function removeWidth(){ 
 
\t $(".floatHeads").css("width", "") 
 
} 
 

 
function addWidth(){ 
 
\t $(".floatHeads").css("width", "400") 
 
}
<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>

0

Вот еще один способ посмотреть, как это работает:

$(".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>

Смежные вопросы