How to remove property from Style attribute?

Question

How to remove a property from CSS Style using JQuery or Javascript. I want to remove the width property from the below div style. I tried working with the link but it did not help even. The property that i want to remove from style is a div that has no ID associated but has only classname.

<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;">

I tried doing the below:

.floatHe .floatHeads {
    width: '';
}

also tried below

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

Nothing from the above worked for me. Please guide.

@FlyingGambit : I am not trying to do it from any selector or component . I want to do it from Div — sTg, Jan 04 '17 at 05:52
I dont have any Id for the div nor i can put one to it. So the above one will not help. — sTg, Jan 04 '17 at 05:53
Why do you think its not working? I ran same code and it removed width from div tag. — Ankush G, Jan 04 '17 at 05:55
@sTg well the jquery one is the way to go. I guess you are using it somewhere it has no effect on the element. If you post the code where and how you style it, that would help us to help you. — Jai, Jan 04 '17 at 05:56
if you tried it, you tried it wrong - https://jsfiddle.net/u0ek4gjr/ — Jaromanda X, Jan 04 '17 at 05:57
Its working here go through the [link](https://jsfiddle.net/yvne62ah/14/) — Shubham Baranwal, Jan 04 '17 at 06:04

score 3 · Answer 1 · answered Jan 04 '17 at 06:08

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

function addWidth(){
 $(".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>

score 0 · Answer 2 · answered Jan 04 '17 at 05:57

0

You might need to wrap your code in a handler for ready() so that it runs after the document loads?

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

answered Jan 04 '17 at 05:57

Matt

3,677
1
14
24

WitVault · Answer 3 · 2017-01-04T07:02:14.767

0

With plain 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>

edited Jan 04 '17 at 07:02

answered Jan 04 '17 at 06:00

WitVault

23,445
19
103
133

1

`document.querySelector` will give you only one element. be aware of it. – Jai Jan 04 '17 at 06:01
Yes You are right. I have updated the anwser. – WitVault Jan 04 '17 at 06:06

score 0 · Answer 4 · answered Jan 04 '17 at 06:04

0

You can use "unset" to "reset" to inherited value. MDN page on unset here.

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

answered Jan 04 '17 at 06:04

Arthur Cheung

1
1

score 0 · Answer 5 · answered Jan 04 '17 at 06:08

Here is one more way to look how it works:

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

How to remove property from Style attribute?

5 Answers5