Thomas Zoé Thomas Zoé - 6 months ago 20
Javascript Question

remove overriding css without jQuery

I added an image with width and height attributes, but they got overriden by a css-class.
The class couldn't be changed, because it's from a library and I would destroy much of the styling. A solution would be setting the styling attributes, but i can't, because the image come from an editor (tinyMCE).

How can i invalidate the current two css attributes or override them with the image attributes without using jquery? Other solutions are also welcome.

thank you

html snippet from editor:

<img src="https://crossbrowsertesting.com/design/images/cbt-sb_logo.svg" alt="" width="422" height="69">


styling from debugger:

md-card > img, md-card > :not(md-card-content) img {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%;
height: auto;
}

img[Attributes Style] {
width: 422px;
height: 69px;
}


As mentioned i can't change the html snippet because it gets delivered from an
editor. Also the image size gets set dynamically

Answer

Let's say your image comes in as

<img src="/imgs/test.png" class="imgTest" alt="img"/>

Then in you own .CSS file you can give it a property of !important, like so.

.imgTest 
{
   width: 20px !important;
   height: 30px !important;
}

Answer(pseudocode): Use Javascript for the solution

var x = document.getElementsByClassName("example");
  for (var i = 0; i < x.length; i++) {
    x[i].style.width = "10px";
    x[i].style.height = "10px";
  }

jsfiddle.net/0yfxpqwz

Comments