Question 270238 in Html Question posted in
Some basic documentation can be found here.

How do I edit the HTML properties of an element by using document.queryselector()?

I am following a JavaScript course and I was wondering why this code is not working:

        document.querySelector('.message').style.width ='30rem';
        document.querySelector('.message').style.transition='0.3s';

This method works if I select HTML elements but does not work with classes. To fix the problem I thought it’d be useful if I edited the element’s properties by adding the style property directly into the element like this:

<div class=".message" style="width=30rem; transition=0.3s;" > </div>
Tags:

2

Answers


  1. 0 
    hope this can help, you have to correct class=".message" to class="message"

<div class="message">Some content</div>

<script>
    const customDiv = document.querySelector(".message");
    customDiv.style.cssText = 'width: 30rem; transition: width 0.3s;';
</script>
    Login or Signup to reply.
  2. 0

    Instead of setting each style property individually, combine them into one string and then apply them using the cssText property.

    document.querySelector('.message').style.cssText = 'border-radius:10px; width: 30rem; transition:0.3s;';
    <div class="message"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search