Make changes to external CSS using HTML and JavaScript

Question

Make changes to external CSS using HTML and JavaScript

Is it possible to dynamically change the value of a background in an external CSS file using JavaScript? Currently, all my pages are connected to a CSS file that controls the background for each page. I am attempting to modify the background by clicking a button with this code:

html:

<button style="background:url(images/bg.png);" onclick="main()"><font color="#FFFFFF">Image</button>
<button style="background-color:#000;" onclick="main()"><font color="#FFFFFF">Black</button>
<button style="background-color:#030;" onclick="main()"><font color="#FFFFFF">Green</button>
<button style="background-color:#006;" onclick="main()"><font color="#FFFFFF">Blue</button>

css:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 24px;
    background:url(images/bg.png);
}

Javascript:

<script type="text/javascript">
    function main(clicked){
        //Doesnt work
        document.styleSheets[0].cssRules[0].style.background="#00FF00";
    }
</script>

How can I achieve changing the background in the css file through the click of a button?

javascript html css external

Answer 1

Answer №1

This example shows how you can achieve a similar result

<button>Press me</button>

const button = document.getElementsByTagName('button');
button[0].onclick = function() {
  document.body.style.background = "#FFFF00";
}

live demo link

Answer 2

This example shows how you can achieve a similar result

<button>Press me</button>

const button = document.getElementsByTagName('button');
button[0].onclick = function() {
  document.body.style.background = "#FFFF00";
}

live demo link

Answer 3

Answer №2

It seems like your goal is to modify the background style directly within the CSS file.

Keep in mind that it's not possible to alter a CSS file hosted on a server through JavaScript alone. You'll have to trigger a server-side function to accomplish this task. Do you have any server technologies in place (such as PHP or ASP.Net)? If yes, you can set up a button click event to call a function on the server which will update the CSS file accordingly.

Answer 4

It seems like your goal is to modify the background style directly within the CSS file.

Keep in mind that it's not possible to alter a CSS file hosted on a server through JavaScript alone. You'll have to trigger a server-side function to accomplish this task. Do you have any server technologies in place (such as PHP or ASP.Net)? If yes, you can set up a button click event to call a function on the server which will update the CSS file accordingly.

Answer 5

Answer №3

There are three ways to utilize CSS.

Include a .css file and
Use a <style> tag.
Apply the style attribute within an element;

When we modify the appearance of an element with JavaScript, typically we alter properties within the style attribute. Although it is possible to adjust settings within the <style> tag, it is not recommended. Making changes in a .css file is also not feasible. Any alterations made within the <style> tag or using the style attributes only affect the DOM.

Therefore, it is impossible to modify External CSS with JavaScript. However, you can certainly change CSS properties within the style attribute. Execute the code below, open Chrome Inspector, select the <body> tag, click the button, and observe the results.

document.getElementById('changeBg').addEventListener('click', function() {
  document.body.style = "background:red;"
})

body {
  background: blue;
}

button{
  margin:100px;
}

<body>
  <button id="changeBg">Click here to change Background</button>
</body>

Answer 6

There are three ways to utilize CSS.

Include a .css file and
Use a <style> tag.
Apply the style attribute within an element;

When we modify the appearance of an element with JavaScript, typically we alter properties within the style attribute. Although it is possible to adjust settings within the <style> tag, it is not recommended. Making changes in a .css file is also not feasible. Any alterations made within the <style> tag or using the style attributes only affect the DOM.

Therefore, it is impossible to modify External CSS with JavaScript. However, you can certainly change CSS properties within the style attribute. Execute the code below, open Chrome Inspector, select the <body> tag, click the button, and observe the results.

document.getElementById('changeBg').addEventListener('click', function() {
  document.body.style = "background:red;"
})

body {
  background: blue;
}

button{
  margin:100px;
}

<body>
  <button id="changeBg">Click here to change Background</button>
</body>

Make changes to external CSS using HTML and JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble generating an array for checkboxes using jQuery, AJAX, and PHP

Canvas with a button placed on top

Methods to maintain the select2 dropdown event open while interacting with another select2 dropdown

jquery interval randomly selecting a new option instead of verifying the correct answer

The displayed value in the text field remains constant even when the object's attribute is modified

Create a canvas and include input boxes in an HTML document

OptinMonster's innovative feature - the Pardot form with an inline button

The ng-model-options in Angular 2 is set to "updateOn: 'change blur'"

Achieving the Menu Hover Effect - step by step guide to recreating this stylish effect

JQuery automatically selects an action upon 'change' event, but does not do so upon 'select' event

How can one extract information from an ASP.NET MVC on a separate webpage?

Is there a way to use jQuery to retrieve the date and time from a timestamp within an input field?

Emphasize Expandable Sections based on Search Term

Exploring the implementation of the meta robots tag within Joomla 2.5's global settings

Updating the image source attribute using Vue.js with TypeScript

Trouble with sending input through Ajax in HTML form

What happens when dynamically loaded static resources are loaded?

Having trouble interacting with the "Continue" button on PayPal while using Selenium

discovering obscured information using jquery

Email address string loses the '+"' when using AJAX