为什么我的 javascript 样式代码不起作用

Question

这是我的 html 代码：

<body>
<p id="text">Change my style</p>
<div>
    <button id="jsstyles" onclick="style()">Style</button>
</div>
</body>

这是我的 javascript:

function style()
{
Text.style.fontSize = "14pt";
Text.style.fontFamily = "Comic Sans MS";
Text.style.color = "red";
}

我没有发现这段代码有问题，它仍然无法正常工作

Answer 1

应该是text而不是Text。

或者更好地使用 document.getElementById.

使用 named access on the window object 是不受欢迎的。 Do DOM tree elements with ids become global variables?

Answer 2

正如 Barmer 在评论中提到的，您没有设置变量。

更重要的是，您不能将 style 用作 variable 或 function 名称。我尝试使用 style 作为 funtion 名称，它生成 error 其中 style 不是 function

这应该有效：

<body>
<p id="text">Change my style</p>
<div>
    <button id="jsstyles" onclick="styles()">Style</button>
</div>
</body>

var Text = document.getElementById('text')
function styles()
{
Text.style.fontSize = "14pt";
Text.style.fontFamily = "Comic Sans MS";
Text.style.color = "red";
}

Answer 3

你的代码有一些问题

您需要将变量设置为要在 javascript 中更改的元素。
您不能将函数命名为 style()，因为名称样式已在 javascript 中使用。而是尝试使用不同的名称，例如 handleStyle() 或其他名称。

// Set variable to what element you want to change
const Text = document.querySelector("#text");

// For this example I use handleStyle for the function
function handleStyle() {
  Text.style.fontSize = "14pt";
  Text.style.fontFamily = "Comic Sans MS";
  Text.style.color = "red";
}

<body>
    <p id="text">Change my style</p>
    <div>
        <button id="jsstyles" onclick="handleStyle()">Style</button>
    </div>
</body>

为什么我的 javascript 样式代码不起作用

why is my javascript style code not working

javascript

html

function

styling