Answers for "javascript change element style"

11

add style javascript

// Bad:
element.setAttribute("style", "background-color: red;");
// Good:
element.style.backgroundColor = "red";
Posted by: Guest on September-08-2020
2

JS change styles

// select element from DOM
const sample = document.getElementById("myid");
// or you can use *vars*
var sample = document.getElementById("myid");

// change css style
sample.style.color = 'red'; // Change color
// or (not recomended)
sample.style = "color: red"; //This changes all styles. NOT RECOMENDED
Posted by: Guest on May-09-2021
12

javascript modify css

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

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

//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
$("#elementID").css("css-property", "css-attribute");

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

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

//you can also make them nice by adding line breaks
//Example: 
$("#elementID").css({
  "css-property": "css-attribute",
  "css-property": "css-attribute"});
//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
Posted by: Guest on April-28-2020
9

how to change style of an element using javascript

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>
Posted by: Guest on January-10-2020
2

adding styling to element using javascript

var elem = document.querySelector('#some-element');

// Set color to purple
elem.style.color = 'purple';

// Set the background color to a light gray
elem.style.backgroundColor = '#e5e5e5';

// Set the height to 150px
elem.style.height = '150px';
Posted by: Guest on October-28-2020
4

javascript style an element

// Getting the element first
var myElement = document.querySelector("#myElement");

// examples for updating styles
myElement.style.color = "blue";
myElement.style.backgroundColor = "red";
Posted by: Guest on September-02-2020

Code answers related to "javascript change element style"

Code answers related to "Javascript"

Browse Popular Code Answers by Language