All geek questions in one place

How to add a new rule to an existing CSS class

In the code below, I illustrated what I'm trying to achieve ... Modifying 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 an element of the preliminary process of a site working on screens of different sizes. The result will be ...

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

What will be seen when checking the DOM.

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

solvable.

After a lot of trial and error, here is a working function that allows javascript to insert styles directly into 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

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

We hope others find this a useful method for using variables in their CSS in pure javascript.

+4
source share
4 answers

I will give an example that should suit your needs

Demo jsfiddle

 // this gets all h4 tags var myList = document.getElementsByTagName("h4"); // get all p elements // this loops through them until it finds one with the class 'icontitle' then it assigns the style to it var i = 0; while(i < myList.length) { if(myList[i].className == "icontitle") { myList[i].style.color="red"; } i++; }
+2
source

This feature works great 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

  changeCSS("h4.icontitle","backgroundColor", "green");
+1
source

Try this piece of code

 $('h4.icontitle').css('-webkit-text-size-adjust','84%');
0
source 
 /** 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 inside the body, use querySelector for target elements by 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 fragment and use it conditionally ex: if "new_css" is a 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");
0
source

Source: https://habr.com/ru/post/1498754/

More articles:


All Articles