javascript - Deactivate "element.style" in csshtml? - Stack Overflow

admin管理员组

文章数量:1300011

I see this css code in the "style" tab of the Chrome developer tools window:

element.style {
    height: auto;
    width: 100%;
    margin-top: -148px;
}

I want to overwrite it with this css code in my .css file:

.so-widget-sow-simple-masonry-simple-masonry-d75171398898 .sow-masonry-grid-item img {
    width: auto;
    height: 244px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto; 
}

But the style definitions of the element.style is already there. I cant find the .js so fast. Can someone help me? Thx

I see this css code in the "style" tab of the Chrome developer tools window:

element.style {
    height: auto;
    width: 100%;
    margin-top: -148px;
}

I want to overwrite it with this css code in my .css file:

.so-widget-sow-simple-masonry-simple-masonry-d75171398898 .sow-masonry-grid-item img {
    width: auto;
    height: 244px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto; 
}

But the style definitions of the element.style is already there. I cant find the .js so fast. Can someone help me? Thx

• javascript
• html
• css
• siteorigin

Share Improve this question Follow edited Mar 9, 2016 at 9:48 Johannes Jander 5,02022 gold badges3232 silver badges4646 bronze badges asked Mar 9, 2016 at 8:51 moxmlbmoxmlb 1,33033 gold badges1111 silver badges1919 bronze badges 3

• try to overwrite the preference by adding !important for the values.. but this is not advisable... – G.L.P Commented Mar 9, 2016 at 8:54
• okay, that works, but is there an other solution? – moxmlb Commented Mar 9, 2016 at 8:57
• you could check stackoverflow./questions/2465158/… for removing particular inline styles – Bruno Kos Commented Mar 9, 2016 at 9:01

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

What you see in the chrome developer window as element style is the styles on a element which are written inline

element.style {
 /*this all are the inline written styles*/
}

Now ing to the point But with this codes the element.style is allready there you are not able to overwrite the styles because of the CSS Priorities. In this scenario the rule is Inline CSS has more priority than external CSS

So what can you do??

1. You have to either remove the inline css where ever its written. That way your external css will apply

2. If you cannot modify the inline CSS for some reason then only option is to set the styles as !important in your external CSS files. People here have already mentioned this solution, But this is not always remended.

3. Take all the Inline CSS written on that element and create a new class in your external file and then put it there, Now give this class name to the element. So the original styles are applied back. Now es the point to your new Styles that you have to override. Also the new CSS priority rule when using 2 classes. CSS rule which is read last (in the css file, not the order you put in the element) will have priority. So make sure you place the new CSS rule below the other class you just created as mentioned above.

   • What if you have to use 2 separate files to write these 2 classes?? Then es one more CSS priority rule. The file that is placed last in the DOM will have the priority (remember its not when the file is loaded into the DOM, its about where its placed in the DOM)

you can add !important to end of every styles.

for example use this:

height: 244px !important;

instead of

height: 244px;

You can always go with:

.so-widget-sow-simple-masonry-simple-masonry-d75171398898 .sow-masonry-grid-item img {
width: auto !important;
height: 244px !important;
margin-top: 0px !important;
margin-left: auto;
margin-right: auto; 
}

Important styles will overwrite inline styles, unless inline styles also have !important clause (but this is rare actually).

Sure, you can remove the style attribute on the element:

element.removeAttribute('style');

If the element.style is gone, your CSS file's rules will be visible.

本文标签： javascriptDeactivate quotelementstylequot in csshtmlStack Overflow