如何将css代码放入javascript中

我想在javascript函数中添加一个css代码，这就是我拥有的函数

function test1() {
    document.getElementById("p1").innerHTML = "test";
}

我想要这个css代码

p1 {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

-

基本上，我有一个段落（p1），我使用javascript，因为我制作了一个按钮onclick=“test1（）”，因此当它单击它时，它会将文本更改为我放置的文本，即“test”，但我不希望整个段落有阴影，我只希望“test”有阴影，希望我足够清楚

谢谢诸位诸如此类的事

document.getElementById("p1").style.textShadow = "5px 5px 1px #ff0000,10px 10px 1px #0000ff";

---

在这里找到：

很难说，你也应该发布你的HTML，这样我们才能更好地理解它。如果可以使用jQuery，也可以尝试以下方法：

$('.p1').css('text-shadow','0px 5px...etc');

但我同意，您可能不需要通过JS执行此操作。

试试这个

<p id="p1">
This is a <span>test.</span>
</p>
<button id="button1">Button</button>

---

Fiddle:

在您的案例中，CSS不需要任何特殊编程。只需将它正确地添加到HTML中。为什么要使用JavaScript来实现这一点？如果您只是将CSS文件包含在DOM中，则将应用样式设置。如果您想动态切换样式，请在类中指定它们，然后只更改元素的class属性。也许他想动态添加shadow？简而言之，我有一个段落（p1），我使用javascript，因为我制作了一个按钮onclick=“test1（）”，所以当它单击它时，它会将文本更改为我放置的文本，即“test”，但我不希望整个段落都有阴影，我只希望测试有阴影，希望我足够清楚！然后在CSS文件中使用类。

.shadow{……}

，然后

document.getElementById（'p1'）。className=“shadow“

。CSS类比一堆样式规则更有意义。我只会添加单独的样式规则，其中每个元素都会有不可预测的差异（例如，条形图中的条形高度）。我知道这样做不是很干净，最好使用一些CSS类，但这个答案是正确的。所以，不评论为什么就投否决票，这不是建设性的。。。

var button = document.getElementById("button1");

button.addEventListener("click", function(){
    var p = document.getElementById("p1");
    var test = p.getElementsByTagName("span")[0];
    test.style.textShadow = "5px 5px 1px #ff0000,10px 10px 1px #0000ff";
});