css Question posted in
Some basic documentation can be found here.

How to change CSS property inside a descendant selector

How do I change or remove style "width" property for img?

.main_box_img img {
  width: 100%;
}
<div class="main_box_img">
  <img src="...">
</div>

document.getElementsByClassName("main_box_img")[0].getElementsByTagName('img')[0].style is empty.

I can get width value using getComputedStyle(), but it’s read-only.

Seems to be a simple question but I’ve found nothing.

Tags:

4

Answers


  1. 0

    if you need to remove a style from an element you could just use a specific modifier class for this purpose and then remove it via JavaScript.

    e.g.

    const mainboximg = document.querySelector('.mainbox');
mainboximg.classList.remove('mainbox--fullwidth');
    .mainbox--fullwidth img {
  width: 100%
}
    <div class="mainbox mainbox--fullwidth">
    <img src="...">
</div>

    By removing that class the style will no longer affect the element.

    Login or Signup to reply.
  2. 0

    to alter the style sheet you can use the following code which is just a simple example:

    <style id="uniqueStylesheet">
  .first-element {
    background-color: blue;
  }
  .second-element {
    background-color: blue;
  }
  .third-element {
    background-color: blue;
  }
  div {
    width: 100px;
    height: 100px;
  }
 </style>

<div class="first-element"></div>
<div class="second-element"></div>
<div class="third-element"></div>
<button onclick="modifyCSSRule()">Click me!!</button>

<script>
  function modifyCSSRule() {
    // Get stylesheets in the document
    let styleElement = document.getElementById('uniqueStylesheet');
  
    let sheet = styleElement.sheet || styleElement.styleSheet;

    let rules = sheet.cssRules || sheet.rules;

    for (let rule of rules) {
      if (rule.selectorText == '.second-element') {
        rule.style.setProperty('background-color', 'red', 'important');
      }
    }
  }
</script>

    in this example you always know the second css rule in your stylesheet is the one that needs to be changed this way of coding is not preffered but it is the way you wanted it i believe

    Login or Signup to reply.
  3. 0

    You can either:

    • Add a new class that override the previous style
    const mainboxImg = document.querySelector('.mainbox img');

mainboxImg.classList.add('width-auto');
    .mainbox--fullwidth img {
  width: 100%
}

.mainbox--fullwidth img.width-auto {
  width: auto;
}
    <div class="mainbox mainbox--fullwidth">
  <img src="https://picsum.photos/200">
</div>
    • or remove the old class from the element
    const mainboxImg = document.querySelector('.mainbox img');
mainboxImg.classList.remove('mainbox--fullwidth');
    .mainbox--fullwidth img {
  width: 100%
}

.mainbox--fullwidth img.width-auto {
  width: auto;
}
    <div class="mainbox mainbox--fullwidth">
  <img src="https://picsum.photos/200">
</div>
    Login or Signup to reply.
  4. 0

    Creating a css class for images within .main_box_img with width: 100% will enable removing the class later on. Furthermore: with querySelector[All] you can improve selecting elements (with elaborate css query selectors)

    const images = document.querySelectorAll(`.main_box_img img`);
setTimeout(_ => images.forEach(image => image.classList.remove(`max`, `min`)), 1500);
    .main_box_img img.max {
  width: 100%;
}

.main_box_img img.min {
  width: 50px;;
}
    <div class="main_box_img">
  <img src="https://picsum.photos/200?random=1">
  <img src="https://picsum.photos/200?random=3" class="min">
  <img src="https://picsum.photos/200?random=2" class="max">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search