javascript change css

document.querySelector('h1', container).style.backgroundColor = 'red';

View another examples Add Own solution

3.8

Krish 100200 points

                                    
document.getElementById(id).style.property = new style

Thank you! 5

3.8 (5 Votes)

Krish 100200 points

                                    &lt;p id=&quot;demo&quot;&gt;&lt;/p&gt;

&lt;script&gt;
document.getElementById(&quot;demo&quot;) = &quot;red&quot;;
&lt;/script&gt;

Thank you! 2

3 (2 Votes)

4.5

Awgiedawgie 440220 points

                                    //Pure JavaScript DOM
var el = document.getElementById(&quot;elementID&quot;);
el.style.css-property = &quot;cssattribute&quot;;

//When doing A CSS property that have multiple words, its typed differently
//Instead of spaces or dashes, use camelCase
//Example:
el.style.backgroundColor = &quot;blue&quot;;

//Make sure before using jQuery, link the jQuery library to your code
//JavaScript with jQuery
//jQuery can use CSS property to fid=nd an element
$(&quot;#elementID&quot;).css(&quot;css-property&quot;, &quot;css-attribute&quot;);

//On jQuery, the CSS property is typed like normal CSS property
//Example: 
$(&quot;#elementID&quot;).css(&quot;background-color&quot;, &quot;blue&quot;);

//If you want multiple property for jQuery, you can stack them on one code
//instead of typing each attribute
//Example: 
$(&quot;#elementID&quot;).css({&quot;css-property&quot;: &quot;css-attribute&quot;, &quot;css-property&quot;: &quot;css-attribute&quot;});

//you can also make them nice by adding line breaks
//Example: 
$(&quot;#elementID&quot;).css({
  &quot;css-property&quot;: &quot;css-attribute&quot;,
  &quot;css-property&quot;: &quot;css-attribute&quot;});
//You can add as much CSS property and attribute as you want
//just make sure, always end it with a comma before adding another one
//the last property doesn't need a comma

Thank you! 2

4.5 (2 Votes)

3.44

Awgiedawgie 440220 points

                                    &lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;Change the Background Color with JavaScript&lt;/title&gt;
&lt;script&gt;
    // Function to change webpage background color
    function changeBodyBg(color){
        document.body.style.background = color;
    }
    
    // Function to change heading background color
    function changeHeadingBg(color){
        document.getElementById(&quot;heading&quot;).style.background = color;
    }
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1 id=&quot;heading&quot;&gt;This is a heading&lt;/h1&gt;
    &lt;p&gt;This is a paragraph of text.&lt;/p&gt;
    &lt;hr&gt;
    &lt;div&gt;
        &lt;label&gt;Change Webpage Background To:&lt;/label&gt;
        &lt;button type=&quot;button&quot; onclick=&quot;changeBodyBg('yellow');&quot;&gt;Yellow&lt;/button&gt;
        &lt;button type=&quot;button&quot; onclick=&quot;changeBodyBg('lime');&quot;&gt;Lime&lt;/button&gt;
        &lt;button type=&quot;button&quot; onclick=&quot;changeBodyBg('orange');&quot;&gt;Orange&lt;/button&gt;
    &lt;/div&gt;
    &lt;br&gt;
    &lt;div&gt;
        &lt;label&gt;Change Heading Background To:&lt;/label&gt;
        &lt;button type=&quot;button&quot; onclick=&quot;changeHeadingBg('red');&quot;&gt;Red&lt;/button&gt;
        &lt;button type=&quot;button&quot; onclick=&quot;changeHeadingBg('green');&quot;&gt;Green&lt;/button&gt;
        &lt;button type=&quot;button&quot; onclick=&quot;changeHeadingBg('blue');&quot;&gt;Blue&lt;/button&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Thank you! 9

3.44 (9 Votes)

3.78

Awgiedawgie 440220 points

                                    &lt;html&gt;
&lt;body&gt;

&lt;p id=&quot;p2&quot;&gt;Hello World!&lt;/p&gt;

&lt;script&gt;
document.getElementById(&quot;p2&quot;).style.color = &quot;blue&quot;;
&lt;/script&gt;

&lt;p&gt;The paragraph above was changed by a script.&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;

Thank you! 9

3.78 (9 Votes)

Are there any code examples left?

Find Add Code snippet

New code examples in category Javascript

Javascript 2023-04-21 22:52:36
Javascript 2022-03-27 22:25:20 javascript download string as file
Javascript 2022-03-27 21:40:22 sort numbers in array javascript
Javascript 2022-03-27 21:20:04 compare two arrays and return the difference javascript
Javascript 2022-03-27 21:15:02 javascript regex french phone number
Javascript 2022-03-27 21:05:03 cypress custom error message
Javascript 2022-03-27 21:00:05 create element javascript with id
Javascript 2022-03-27 20:40:57 feather icons react
Javascript 2022-03-27 20:20:01 how to make graphql request in axios
Javascript 2022-03-27 20:15:07 bootstrap validator password and confirm password

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

javascript change css

Welcome Back!

Create a Free Account