How to modify CSS rules without adding style attribute?

Question

I'm a newbie to Javascript and I am trying to implement a functionality to an existing project. I want to modify the CSS rules of an html element such that I will enlarge and restore the video window. When I select the element from Chrome Developer Tools I see the following properties:

element.style {

}

#plug-in-container.visible {
   height: 335px;
   width: 470px;
   margin-top: -147px;
   top: 50%;
   margin-left: -229px;
   left: 50%;
}

I use the following code to enlarge the video:

$('.visible').css( {
    height: '700px',
    width: '1000px',
    'margin-top': '-350px',
    top: '50%',
    'margin-left': '-480px',
    left: '50%'
} );

After this, I expect the values of #plug-in-container.visible to change but instead of that, I see the same values as strikethrough and I see that the element.style is updated:

element.style {
   height: 700px;
   width: 1000px;
   margin-top: -350px;
   top: 50%;
   margin-left: -480px;
   left: 50%;
}

When I dynamically look at the html element, I see that an element style is created with values height, width etc. I don't want style to be created or updated, but I want to update #plug-in-container.visible, because that would be much safer in the conditions where I want to resize the video window. How can I do that?

Fabrizio Calderan · Accepted Answer · 2013-04-29 11:41:19Z

4

Just define another CSS rule on cascade with at least the same specificity of the previous one (or higher, e.g.)

#plug-in-container.visible.enlarged {
   height: 700px;
   width: 1000px;
   margin-top: -350px;
   margin-left: -480px;
}

and then just add the new class using

$('.visible').addClass('enlarged');

so, as a further benefit, you also keep the css off from the javascript.

Of course you can use this approach as long as the values you need to update are fixed and not dinamically evaluated by javascript (in that case an inline style change is necessary)

edited Apr 29, 2013 at 11:41

answered Apr 29, 2013 at 11:24

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Montas · Accepted Answer · 2013-04-29 11:24:19Z

1

What you see is "styles stack" if i can call it that. It shows you all rules that modify dom element. Strikethrough means that some other rule overwrites that rule.

You are using jQuery to edit css, so all styles you use in that call will appear on element itself. You can't edit CSS rules from javascript as far as I know.

How exactly would it be "safer" to edit class instead of style?

answered Apr 29, 2013 at 11:24

Montas

7046 silver badges14 bronze badges

2 Comments

gaynorvader Over a year ago

Style adds an inline style which will override all styles in the stylesheet. This might cause problems if you're using media queries or similar.

paris Over a year ago

The problem was; I was using $('.visible').css to change the properties but that was adding a style property on my html element. When I close the video, I set it as invisible. However, in this case, even if I set it as invisible, it would still show a black box after I close the window because of the still existing style property. And since there are just too many cases where my window might close, it's not practical to go and remove the style element where appropriate. Fabrizio Calderan's answer solved my problem.

MMM · Accepted Answer · 2013-04-29 11:24:38Z

0

That's basically how it works, you can't update the CSS style in another way, unless you inject another stylesheet.

So this is the intended behaviour.

When you use $(element).css(), you update the css for those elements, you don't edit the CSS class. That's why it gets added to the inline style attribute of that element.

answered Apr 29, 2013 at 11:24

MMM

7,3402 gold badges27 silver badges42 bronze badges

Comments

Akseli Palén · Accepted Answer · 2018-03-12 00:15:12Z

The paris's question asked:

but I want to update #plug-in-container.visible

... and @MMM replied:

you can't update the CSS style in another way, unless you inject another stylesheet

Actually, you can. The following line modifies padding-top value from 20px to 300px on the third rule in the second stylesheet of the document:

document.styleSheets[1].cssRules[2].style.paddingTop = '300px'

... given index.html:

<html>
<head>
  <link type="text/css" href="foo.css"
  <link type="text/css" href="style.css">
<head>
<body><h1>Bar</h1></body>
</html>

... and style.css:

html, body { padding: 0; margin: 0 }
body { color: black; }
h1 { color: gray; padding-top: 20px; }

Therefore, regardless the practicality for the original problem, if #plug-in-container.visible is the first rule of the first stylesheet of the document, the styles width, height etc can be modified by:

var s = document.styleSheet[0].cssRules[0].style
s.height = '700px'
s.width = '1000px'
s.marginTop: '-350px'
s.marginLeft: '-480px'

Collectives™ on Stack Overflow

How to modify CSS rules without adding style attribute?

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related