如何使用javascript更改css

-1

我需要动态更改我的css属性。我知道正确的方式做到这一点是：document.getElementById("XXXX").style.fontSize = "xx-large";如何使用javascript更改css

然而，当我有这个CSS：

#year1 .subdomain-text { 
fill: #000; 
font-size: 6px; 
}

我一直没能找到访问它的方式，我曾尝试任何可能的排列（没有什么工作！）：

document.getElementById("year1.subdomain-text").style.fontSize = "xx-large"; 
document.getElementById("year1").style.fontSize = "xx-large"; 
document.getElementById("subdomain-text").style.fontSize = "xx-large"; 
document.getElementById("#year1.subdomain-text").style.fontSize = "xx-large";

....

任何想法如何做到这一点？

谢谢！

来源

2017-03-15 user3258465

您尝试针对HTML元素和要素，以及如何准确地试图改变他们会有帮助...您正试图将选择一个描述的例子使用会让你很难理解你的标记实际是什么样子。 –

您正在使用.getElemenByID()这意味着你仅指定ID名称无需包含类名即document.getElementById("year1").style.fontSize = "xx-large";

这里举例：http://jsfiddle.net/Nb7wy/1770/

来源

2017-03-15 15:23:35

我已经试过了。不幸的是，它改变了year1中的文本，但不是它在子域文本中包含的内容：S – user3258465

请将您的HTML标记加起来 –

的document.getElementById获取其id属性的HTML元素。在你的情况下，它应该是： document.getElementById（“year1”）

如果id是唯一的，如预期的那样，该类对于css规则中的选择器来说也不是必需的。你可以从你的css规则中删除这个类。

对于需要组合选择器的其他情况，可以使用document.querySelector（css_selector）（而不是document.getElementById）。

工作代码：

<html> 
<head> 
<style> 
    #year1 .subdomain-text { 
    fill: #000; 
    font-size: 6px; 
    } 
</style> 
</head> 
<body> 
    <p id="year1" class="subdomain-text">Texto prueba</p> 
    <input type="button" onclick="test();" /> 
    <script> 
     function test() { 
      document.getElementById("year1").style.fontSize = "xx-large"; 
     } 
    </script> 
</body> 
</html>

来源

2017-03-15 15:24:11 airos

我也试过这个，但不幸的是它也没有工作：S – user3258465

是您的year1 id唯一在页面中？ – airos

我已将工作代码的示例添加到answer @ user3258465。按下按钮时它会更改字体大小。 – airos

如何使用javascript更改css

回答

相关问题