Can JavaScript Change the Value of @Page CSS

Can JavaScript change the value of @page CSS?

One simple way is to create a separate style for @page and change it:

var cssPagedMedia = (function () {
    var style = document.createElement('style');
    document.head.appendChild(style);
    return function (rule) {
        style.innerHTML = rule;
    };
}());

cssPagedMedia.size = function (size) {
    cssPagedMedia('@page {size: ' + size + '}');
};

cssPagedMedia.size('landscape');

Changing CSS Values with Javascript

Ok, it sounds like you want to change the global CSS so which will effictively change all elements of a peticular style at once. I've recently learned how to do this myself from a Shawn Olson tutorial. You can directly reference his code here.

Here is the summary:

You can retrieve the stylesheets via document.styleSheets. This will actually return an array of all the stylesheets in your page, but you can tell which one you are on via the document.styleSheets[styleIndex].href property. Once you have found the stylesheet you want to edit, you need to get the array of rules. This is called "rules" in IE and "cssRules" in most other browsers. The way to tell what CSSRule you are on is by the selectorText property. The working code looks something like this:

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.

Let me know how this works for ya, and please comment if you see any errors.

How to dynamically change the value of a CSS property inside a stylesheet?

Here you go:

[].every.call( document.styleSheets, function ( sheet ) {
    return [].every.call( sheet.cssRules, function ( rule ) {
        if ( rule.selectorText === '.myclass' ) {
            rule.style.backgroundColor = 'green';
            return false;
        }
        return true;
    });
});

Live demo: http://jsfiddle.net/gHXbq/

ES5-shim for IE8

How to use Javascript variables in CSS?

No, you can not use javascript variables inside css, but you can change the style of an element dynamically via javascript's DOM elements, style property.

document.getElementById("speed").style.transform = "rotate(" + speed + "deg)";

In your case:

var spinner = document.getElementById("spinner");
var speed = 0;
var addSpeed = 10;
var slowSpeed = 2;

//Activates Slowdown
window.onload = loop();

//Speed up
function spin() {
  if (speed < 0) {
    speed = speed + 10;
    loop()
  } else {
  speed = speed + 10;
  }
}

spinner.addEventListener('click', spin);

//Slowdown
function loop() {
  setTimeout(
    function slow() {
      speed = speed - slowSpeed;
      document.getElementById("speed").innerHTML = speed;
      if (speed > 0) {
        loop();
      }

      document.getElementById("speed").style.transform = "rotate(" + speed + "deg)";

    }, 1000)
}

//Selectors
function wheel() {
  spinner.src = "http://pngimg.com/uploads/car_wheel/car_wheel_PNG23305.png";
}
function spiral() {
  spinner.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Black_bold_spiral.svg/2000px-Black_bold_spiral.svg.png";
}

EDIT:

As per Vladu Ionut's answer , we can use variables in CSS.
Advantages:

1. It works in modern browsers.

Disadavantage:

1. It does not work in old browsers like:
   
   
   1. IE
   2. EDGE <= 15
   3. Chrome < 49, etc..
      ...
      ...

EDIT:2, Update the code, as per the comment

            var spinnerImg   = undefined;            var speedTxt     = undefined;            var wheelImgUrl  = "http://pngimg.com/uploads/car_wheel/car_wheel_PNG23305.png";            var spiralImgUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Black_bold_spiral.svg/2000px-Black_bold_spiral.svg.png";             var speed           = 0;            var maxSpeedChange  = 10;            var slowSpeed       = 2;            var speedParam      = slowSpeed;
            /**            * Function to change the image to wheel            *            * @Arguments: none            *            * @Returns: void            */            function changeToWheel() {                spinnerImg.src = wheelImgUrl;            }
            /**            * Function to change the image to spiral            *            * @Arguments: none            *            * @Returns: void            */            function changeToSpiral() {                spinnerImg.src = spiralImgUrl;            }
            /**            * Function to update speed display            *            * @Arguments: void            *            * @Returns: void            */            function updateSpeedTxt() {                speedTxt.innerHTML = speed;            }
            /**            * @Function to rotate the image            *            * @Arguments: void            *            * @Returns: void            */            function rotateImg() {                spinnerImg.style.transform = "rotate(" + speed + "deg)";            }
            window.addEventListener("load", function() {                spinnerImg = document.getElementById("spinner");                speedTxt   = document.getElementById("speed");                speed = speedParam;                setInterval(function() {                    updateSpeedTxt();                    rotateImg();                    if (speedParam > slowSpeed) {                        speedParam -= 0.05;                    }                    if (speedParam < slowSpeed) {                        speedParam = slowSpeed;                    }                     speed += speedParam;                }, 50); 

                spinnerImg.addEventListener("click", function() {                    speedParam += maxSpeedChange;                 });
            }); 

            #spinner {                width: 500px;                transform-origin: center;            } 

<!DOCTYPE html><html>    <head>     </head>    <body>        <div id="spinnerContainer">            <img id="spinner" src="http://pngimg.com/uploads/car_wheel/car_wheel_PNG23305.png"/>            <h4 id="speed">N/A</h4>        </div>        <div id="selectors">            <ul>                <button onclick="changeToWheel()">Wheel</button>                <button onclick="changeToSpiral()">Spiral</button>            </ul>        </div>        <footer>
        </footer>     </body></html>

Is it possible to alter a CSS stylesheet using JavaScript? (NOT the style of an object, but the stylesheet itself)

As of 2011

Yes you can, but you will be facing cross-browser compatibility issues:

http://www.quirksmode.org/dom/changess.html

As of 2016

Browser support has improved a lot (every browser is supported, including IE9+).

• The insertRule() method allows dynamic addition of rules to a stylesheet.

• With deleteRule(), you can remove existing rules from a stylesheet.

• Rules within a stylesheet can be accessed via the cssRules attributes of a stylesheet.

javascript modify css class property while knowing only the class' name

Following your response in the comment, if the element is being generated by Jquery, then the library is most likely installed. Here is something you can try to select it via Jquery and change the require property.

$(document).ready( function(){    
$('.my-class-name').css('display', 'block');
});

Substituting 'block' for whatever setting you require.

If Jquery is included it should do what your require on page load. You can also attach it to other events as well.

$(document).ready(function(){
$('.my-class-name').click(classClicked);
})

function classClicked(){
$(this).css('display','block')
}

---

Related Topics