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.
在下面的代码中,我已经说明了我要实现的目标……通过添加新规则来修改现有的CSS类。
<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.
在检查DOM时可以看到。
Any ideas would be most welcome. Javascript only - no JQuery here...
任何想法都是受欢迎的。这里没有JQuery…
SOLVED.
解决了。
After a lot of trial and error, here is a working function that allows javascript to insert styles directly into the CSS
经过大量的尝试和错误,这里有一个工作函数,允许javascript直接将样式插入到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.
希望其他人会发现这是在纯javascript中使用CSS中的变量的有用方法。
4 个解决方案
#1
2
I put an example together that should suit your needs
我举了一个适合你需要的例子
DEMO jsFiddle
演示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
1
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");
#3
0
Try this piece of code
试试这段代码
$('h4.icontitle').css('-webkit-text-size-adjust','84%');
#4
0
/**
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
要使用body内的元素,请使用querySelector在其CSS标识符上针对元素。这将帮助您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代码片段,并有条件地使用它:如果“new_css”是新的更改,那么
/**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");
#1
2
I put an example together that should suit your needs
我举了一个适合你需要的例子
DEMO jsFiddle
演示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
1
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");
#3
0
Try this piece of code
试试这段代码
$('h4.icontitle').css('-webkit-text-size-adjust','84%');
#4
0
/**
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
要使用body内的元素,请使用querySelector在其CSS标识符上针对元素。这将帮助您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代码片段,并有条件地使用它:如果“new_css”是新的更改,那么
/**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");