Adding CSS styles to an HTML page using JavaScript

Question

Adding CSS styles to an HTML page using JavaScript

Unfortunately, I do not have the ability to access the HTML directly as it is generated dynamically by a program. However, I do have access to the JS page that is linked to it.

As an example, I am able to manipulate elements using JavaScript like so:

window.onload=function(){
        var output = document.getElementById('main_co');
        var i=1;
        var val="";

      while(i<=1)
        {  if(!document.getElementById('timedrpact01'+i))
            {
                var ele = document.createElement("div");  ele.setAttribute("id","timedrpact01"+i);
                ele.setAttribute("class","inner");

                ele.innerHTML=" Hi there!" ;

                output.appendChild(ele);

I want to build upon this and add a button that can toggle between different CSS sets (there are multiple files being used) located in another path.

Thank you very much!

javascript html css

Answer 1

Answer №1

To include external stylesheets on a webpage, you can use the link element like this:

<link rel="stylesheet" href="http://example.com/path-to-css">

You can target the link element by using the following JavaScript code:

var css = document.getElementsByTagName("link")[0];

In this example, we are selecting the first link element based on its index [0].

Afterwards, if you need to update the path of the stylesheet, you can do so by changing the value of the href attribute.

css.setAttribute("href", "http://example.com/new-path-to-css");

Answer 2

To include external stylesheets on a webpage, you can use the link element like this:

<link rel="stylesheet" href="http://example.com/path-to-css">

You can target the link element by using the following JavaScript code:

var css = document.getElementsByTagName("link")[0];

In this example, we are selecting the first link element based on its index [0].

Afterwards, if you need to update the path of the stylesheet, you can do so by changing the value of the href attribute.

css.setAttribute("href", "http://example.com/new-path-to-css");

Answer 3

Answer №2

 window.onload=function(){
    var result = document.getElementById('main_content');
    var counter=1;
    var value="";
   
    var changeStyles = function() {
      var elements = document.getElementsByTagName("link");
      for(var j=0; j < elements.length; j++)
         elements[j].href = elements[j].href.replace('path_to_file', '_new_path');
    };

   while(counter<=1)
   {  
      if(!document.getElementById('timedrpact01'+counter)) {
        var elem = document.createElement("div");  elem.setAttribute("id","timedrpact01"+counter);
        elem.setAttribute("class","inner");
        elem.innerHTML=" Greetings!" ;
        var btn = document.createElement('button');

        if(btn.addEventListener) {
          btn.addEventListener('click', changeStyles);
        }
        else { 
          btn.attachEvent('click', changeStyles);
        }

        result.appendChild(btn);
        result.appendChild(elem);
      }
   }
 }

Answer 4

 window.onload=function(){
    var result = document.getElementById('main_content');
    var counter=1;
    var value="";
   
    var changeStyles = function() {
      var elements = document.getElementsByTagName("link");
      for(var j=0; j < elements.length; j++)
         elements[j].href = elements[j].href.replace('path_to_file', '_new_path');
    };

   while(counter<=1)
   {  
      if(!document.getElementById('timedrpact01'+counter)) {
        var elem = document.createElement("div");  elem.setAttribute("id","timedrpact01"+counter);
        elem.setAttribute("class","inner");
        elem.innerHTML=" Greetings!" ;
        var btn = document.createElement('button');

        if(btn.addEventListener) {
          btn.addEventListener('click', changeStyles);
        }
        else { 
          btn.attachEvent('click', changeStyles);
        }

        result.appendChild(btn);
        result.appendChild(elem);
      }
   }
 }

Adding CSS styles to an HTML page using JavaScript

Answer №1

Answer №2

Similar questions

Tips for injecting animation into a DIV

When does the ng-disable function become activated?

Storing Objects in MongoDB using Node.js

Why does my dialog box only open the first time and not the second time?

Ways to align images of the same size in a gallery using the margin: auto property

"Having trouble with sound in react-native-sound while playing audio on an Android AVD? Discover the solution to fix this

What is the accurate method of sending form data to the SQL database?

What is the proper way to encode URL parameters for a REST API request?

Deploy Node.js on a Debian server hosted on Google Compute Engine

The rendered typeface may vary from the specified font family

Is there a way to prevent an inline SVG from appearing at a random height without specifying its height or the height of its parent element?

Execute Jquery ajax only on the initial invocation

What is the method for handling a get request in Spring3 MVC?

Handlebars: The property "from" cannot be accessed because it is not an "own property" of its parent and permission has been denied

Enhance Your jQuery Skills: Dynamically Apply Classes Based on URL Like a Pro!

The server appears to be active, but there is a lack of content rendering when using React, Node

File extension being lost when dropped in AJAX request

Can you explain the inner workings of the provided code in a step-by-step manner?

Learn how to effortlessly download a file from Amazon S3 using Angular and ng-click technology

What are some of the top languages, libraries, and modules used to create a web application for constructing templates?