Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add a new rule to an existing CSS class

In the code below i have illustrated what I am trying to achieve... Altering an existing CSS class by adding a new rule to it.

<head>
<style> 

h4.icontitle
{font-size: 22pt;}

</style>
</head>
<body>
<script type="text/javascript">

textpercent = 84;
document.styleSheets[1].cssRules.['h4.icontitle'].style.setProperty('-webkit-text-size-adjust', textpercent+'%', null);

</script>

<h4> hello </h4>

</body>

This is for a pre-process element of a site running on screens of different sizes. The result will be...

h4.icontitle
{font-size: 22pt;
-webkit-text-size-adjust:84%;}

Which will be visible when inspecting the DOM.

Any ideas would be most welcome. Javascript only - no JQuery here...

SOLVED.

After a lot of trial and error, here is a working function that allows javascript to insert styles directly into the CSS

function changeCSS(typeAndClass, newRule, newValue)
{
    var thisCSS=document.styleSheets[0]
    var ruleSearch=thisCSS.cssRules? thisCSS.cssRules: thisCSS.rules
    for (i=0; i<ruleSearch.length; i++)
    {
        if(ruleSearch[i].selectorText==typeAndClass)
        {
            var target=ruleSearch[i]
            break;
        }
    }
    target.style[newRule] = newValue;
}

Called with

    changeCSS("h4.icontitle","backgroundColor", "green");

Hopefully others will find this a useful method to use variables within their CSS in pure javascript.

like image 465
TJS101 Avatar asked Aug 24 '13 18:08

TJS101


Video Answer


2 Answers

This function works perfectly for my site.

function changeCSS(typeAndClass, newRule, newValue)
{
    var thisCSS=document.styleSheets[0]
    var ruleSearch=thisCSS.cssRules? thisCSS.cssRules: thisCSS.rules
    for (i=0; i<ruleSearch.length; i++)
    {
        if(ruleSearch[i].selectorText==typeAndClass)
        {
            var target=ruleSearch[i]
            break;
        }
    }
    target.style[newRule] = newValue;
}

Called with

    changeCSS("h4.icontitle","backgroundColor", "green");
like image 145
TJS101 Avatar answered Sep 30 '22 12:09

TJS101


/**
Use this to update style tag contents
**/
var css = 'h1 { background: grey; }',
head = document.getElementsByTagName('head')[0],
style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);

To work with elements within body use querySelector to target elements upon their CSS identifier. This should help you https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector

var el = document.querySelector(".icontitle");
el.setAttribute("style","-webkit-text-size-adjust:84%");

Or you can prepare a css snippet and use it conditionally ex: if "new_css" is the new change then

/**css code in style tag**/
.icontitle{

  /**style at initial stage**/

}
.icontitle-new-modified{

 /**modified css style at later stage**/

}

//after a condition is satisfied
el.setAttribute("class","icontitle-new-modified");
like image 45
art-fan-vikram Avatar answered Sep 30 '22 12:09

art-fan-vikram