Question

我想在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”，但是我不希望整个段落都有阴影，我只想要'测试'来拥有它，希望我足够清楚！

谢谢

Answer 1

试试这个，

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

根据我对你的问题的理解，你希望函数为JUST单词test添加一个阴影。在这种情况下，使用<span>元素可能是实现这一目标的最简单方法。 .innerHTML()并未选择<p>内的文字，而是设置文本，因此您将留下一个内部只有“test”字样的元素。

下面的javascript可以根据自己的喜好进行修改，但基本概念就在那里。

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";
});

小提琴：https://jsfiddle.net/0Lhc4tav/

Answer 2

那样的东西？

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

在此处找到：http://www.w3schools.com/jsref/prop_style_textshadow.asp

Answer 3

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

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

但我同意你可能不需要通过JS来做这件事。

如何将CSS代码放入javascript中

3 个答案: