-3

I am new to webdesign, and have a question. As I understand it, you can code styles via CSS, or in JS (on the HTML side). In the end, the DOM is the repository of all of these "actions".

Now, if I have an HTML document with associated styles in a CSS, can I override the CSS through JS (written over in the HTML side) by directly changing the DOM?

Update:

@treddie You have to make sure that any JavaScript that references elements in the DOM is processed after those DOM elements have been parsed into memory. For that reason, we often advise people to place their element just before the closing body tag (). – Scott Marcus

Sounds like what I was trying to do, and I tried putting the following Javascript at the bottom of the HTML body and nothing happened.

    <script>
      x1t=x1r.toString();  /* x1r was calculated earlier in this script */ 
       var Product_Linky = document.getElementById("Product_Link_Container");
        Product_Linky.style.left=x1t;
    </script>
</body>

But I'm not surprised...I am totally new to HTML, CSS, JS.

This question already has an answer here:

Changing element style attribute dynamically using JavaScript 10 answers

Sorry...It's hard to find the existing questions when you do not know what words were used so that you can search for the correct phrases. But thanks for the 3 upvotes! (I always do Abs(votes)).

treddie
  • 43
  • 5
  • 5
    Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. – Paulie_D Aug 30 '18 at 16:24
  • 2
    The answer is yes, but it sounds like what you really need is a tutorial.. (https://www.w3schools.com/) – thebjorn Aug 30 '18 at 16:25
  • Sorry...And I changed the title of my post to, "How to restyle an element in the DOM". What I want to do is move the position of an element of the web page to something other than what the CSS has specified. – treddie Aug 30 '18 at 16:26
  • 2
    @thebjorn Please don't advocate for W3Schools. It's well known to have incomplete, incorrect, and/or out-of-date material. The [Mozilla Developer Network](https://developer.mozilla.org) is by far a better resource. – Scott Marcus Aug 30 '18 at 16:27
  • 2
    @ScottMarcus I love MDN as a reference. It's not very approachable as a tutorial. – thebjorn Aug 30 '18 at 16:29
  • @thebjorn I think you may not have looked at the site lately. Check [this](https://developer.mozilla.org/en-US/docs/Learn) out. Also, how good MDN is or isn't should be a reason to promote W3Schools. – Scott Marcus Aug 30 '18 at 16:31
  • @ScottMarcus I was just there. I find it messy and overly verbose (sorry, I really did want to like it). I think the w3schools presentation is easier for people who want to just jump in and try things (instead of "If you have followed all the instructions in this article, you should end up with a page that looks like the one below"..) – thebjorn Aug 30 '18 at 16:36
  • @thebjorn To each his own. The problem that I and many others have is that what they "teach" there is often incorrect (inline event handlers, for example) or incomplete or out of date. – Scott Marcus Aug 30 '18 at 16:39
  • @ScottMarcus Yes I can see that w3schools have major content issues :-( – thebjorn Aug 30 '18 at 16:42

3 Answers3

1

You can access the styles of elements by using their 'style' property in JS.

Example:

 let myElement = document.getElementById('myElement');
 myElement.style.width = '500px';
 myElement.style.fontSize = '14px';

Note that css properties lose their dash in JS. So 'font-size' becomes 'fontSize' and 'background-color' becomes 'backgroundColor'.

And yes, previously defined styles will be overwritten.

  • 2
    While this example is correct, it's generally discouraged to dynamically modify styles this way. It's much better to dynamically apply/remove classes than to work with inline styles. – Scott Marcus Aug 30 '18 at 16:29
  • 1
    @treddie You have to make sure that any JavaScript that references elements in the DOM is processed after those DOM elements have been parsed into memory. For that reason, we often advise people to place their `` element just before the closing `body` tag (`

    `).

     – Scott Marcus Aug 30 '18 at 16:38
  • Damn,,,Where are the editing features for comments?! Like quotes and such? – treddie Aug 30 '18 at 16:38
  • 1
    @treddie You're supposed to update your question if you have additional info that requires formatting (comments have very limited, ie. almost no, formatting). – thebjorn Aug 30 '18 at 16:46
  • @ScottMarcus but when you use `attr('class', 'my-class')` u have to write all the clases again or is there a way to just rip out or add one class to the current classes? something like `attr('class').append('my-class')` ? – The Fool Sep 10 '18 at 07:21
  • 1
    @TheFool You wouldn't use `.attr()` for the modification of classes. Instead, you'd use `.addClass()` and `.removeClass()`. – Scott Marcus Sep 10 '18 at 12:38
  • 1
    @ScottMarcus wow im mind-blown :) thank you – The Fool Sep 10 '18 at 18:07
1

you could use JQuery or plain js to do that.

js:

let myElement = document.getElementById("myDomObject");
myElement.style.backgroundColor = "#D93600";

JQuery:

$('#myDomObject').css('backgroundColor', '#D93600');
The Fool
  • 16,715
  • 5
  • 52
  • 86
1

Yes it can be done by JS html DOM. For example:

document.getElementById("demo").style.fontSize = "12px";

But you can do it easier with JQuery(An important JS library). For example:

$("#demo").css("fontSize","14px");

Instead of #demo, you can use every css selector that you can use in css codes

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
Amirhosein
  • 19
  • 3
  • 1
    Welcome to Stack Overflow. When composing an answer, take a look at the toolbar choices. There are a variety of things that will make your answer more readable. Code, for example, can be more easily read if you format it with the `{}` button. – Scott Marcus Aug 30 '18 at 16:35
  • No toolbar on my end for some weird reason. And thanks for the syntax examples! – treddie Aug 30 '18 at 16:59