JQuery Set width !important after variable

Question

$(".mydiv").css('width', $(".image").width());

this code is working, but i want to make this width important, what is the correct way ?

i tried this but it does not worked

$(".mydiv").css('width', $(".image").width()+'!important');

(!important)

If it works, why do you want to make it `!important`? – Blender Jul 03 '13 at 05:30 — Blender, Jul 03 '13 at 05:30

score 6 · Answer 1 · edited May 23 '17 at 12:18

6

The problem is caused by jQuery not understanding the !important attribute, and as such fails to apply the rule.

You might be able to work around that problem, and apply the rule by referring to it, via addClass():

.importantRule { width: 100px !important; }
 $('#mydiv').addClass('importantRule');

Or by using attr():

$('#mydiv').attr('style', 'width: 100px !important');

For reference please go through the below question:- How to apply !important using .css()?

edited May 23 '17 at 12:18

Community

1
1

answered Jul 03 '13 at 05:34

Nishant

3,614
1
20
26

1

Problem is ; i do not use 100 px, it is a variable – Muhammed Özdemir Jul 03 '13 at 06:01

Raghurocks · Answer 2 · 2013-07-03T06:42:54.923

1

Just try this

        var previousStyle = $(".mydiv").attr('style')
        $(".mydiv").attr('style', 'width:' + $(".image").width() + '!important; ' + previousStyle + '');

Important Attribute $(document).ready(function () { var previousStyle = $(".mydiv").attr('style') $(".mydiv").attr('style', 'width:' + $(".image").width() + '!important; ' + previousStyle + ''); }) check

<html>
<head>
    <title>Important Attribute</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () { 
            var previousStyle = $(".mydiv").attr('style')
            $(".mydiv").attr('style', 'width:' + $(".image").width() + '!important; ' + previousStyle + '');
        })
    </script>
</head>
<body>
    <div class="mydiv" style="border: 1px solid black; width: 200px">check</div>
    <div class="image" style="width: 280px"></div>
</body>
</html>

if you inspect and see the mydiv attributes you can see the width and important tag, as stated from the jquery statement

edited Jul 03 '13 at 06:42

answered Jul 03 '13 at 05:40

Raghurocks

917
7
17

This would work in a sense but if the element contained any other information within it it would be all replaced – Matthew Auld Jul 03 '13 at 05:52
that is not working :/ – Muhammed Özdemir Jul 03 '13 at 05:58
that I just tested which is working, now there will not be overwriting of the previous styles also. Hope this helps. – Raghurocks Jul 03 '13 at 06:00
Can you please tell me what is not working? – Raghurocks Jul 03 '13 at 06:12
@Raghurocks i used your code, it does not worked – Muhammed Özdemir Jul 03 '13 at 06:37
I don't understand what is not working, just check my edit and let me know if it still doesn't work – Raghurocks Jul 03 '13 at 06:45

score 0 · Answer 3 · answered Jul 03 '13 at 05:29

0

you have to change $(".image").width()+'!important' with

$('.image').css('width');

answered Jul 03 '13 at 05:29

Alireza Masali

668
1
10
19

JQuery Set width !important after variable

3 Answers3