Question

我试图让这个代码用onclick按钮改变预先写好的文本字体，字体大小和颜色，但是我无法使它工作这是我到目前为止所得到的并且我卡住了。有人有什么想法吗？

<html>
  <head> 
      <meta charset=utf-8 /> 
      <title>Change Paragraph Text</title> 
  </head>  
  <body> 
      <p id ='text'>I am going to change this text, I hope.</p>  
      <div>
        <button id="jschange" onclick="DoAll">Style</button> 
      </div>
      <script type="text/javascript">
         var style = 'text';
         function DoAll() {
            One(document.write.style.big());
            Two(document.write.style.fontsize(7));
            Three(document.write.style.fontcolor("red"));
         }
      </script>
  </body> 
</html>

Answer 1

试试这个，这是一个更简单的方法，不会让任何人的眼睛流血：

<button onclick="restyle()">Click me to see some results</button>

<p id="changeable">Text that will change.</p>

<script>
   function restyle() {
      var element = document.getElementById("changeable");
      element.style.fontsize(7);
      element.style.fontcolor("red");
      element.innerHTML = "changed text";
   }
</script>

我还在学习Javascript，所以如果有专家，我很想听听他们的想法！：）

Answer 2

我认为你应该这样做：

<html>
  <head>
     <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  </head>
  <body>
     <p id ='text'>I am going to change this text, I hope.</p>  
     <div>
       <button id="jschange" onclick="DoAll()">Style</button> 
     </div>

    <script>
      function DoAll() {
        $('#text').css('font-size', '7').css('color', 'red');
      }
    </script>
  </body>
</html>

Answer 3

尝试使用js代码：

var sstyle = 'text';
function DoAll() {
   var elem = document.getEelementById(sstyle);
   elem.style.fontSize = "7px";
   elem.style.color= "red";
}

Answer 4

你可以试试这个：

<!DOCTYPE html>
<html>
  <body>

    <p>Click the button to display a string in a specified size.</p>
    <button onclick="myFunction()">Try it</button>
    <p id="demo"></p>

    <script>
        function myFunction() {
            var str = "Hello World!";
            var result = str.fontsize(7);
            document.getElementById("demo").innerHTML = result;
        }
    </script>
  </body>
</html>

Answer 5

<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <p id="style-target">This is the element which will change.</p>
    <button id="change-styles">Change Styles</button>
    <script>

      window.onload = function () {
        var changeStyles = query("#change-styles");
        var target = query("#style-target");

        changeStyles.onclick = function () {
          style(target, "fontSize", "18px");
          style(target, "color", "blue");
          style(target, "fontWeight", "bold");
        };
      };

      function style (el, property, value) {
        el.style[property] = value;
      }

      function query (selector) {
        return document.querySelector(selector);
      }
    </script>
  </body>
</html>

看看;

我冒昧地在那里添加其余的“必需的”HTML部分（特别是DOCTYPE）。你现在不需要知道它的用途，但是如果你总是将它包含在你编写的每个HTML页面的顶部，如果你打算让真正的人使用它，它将在未来解决很多问题。页面（基本上，它使Internet Explorer＆lt; IE10吸收更少）。

在现实世界的JavaScript方面，我把它分解成了一些更明智的东西。

在大多数编程语言中，您希望将代码分解为较小的位，以便于阅读和使用。
JavaScript并没有太大的不同。

我已经将设置风格的行为分解为自己的帮助函数

el.style.color = "purple"; // takes `el` and makes an el{color:purple} rule

这里的问题是，在JavaScript中设置值时，任何带有连字符（“font-size”，“background-color”）的CSS“样式”都需要使用camelCase。

el.style.backgroundColor = "black";

我创建了一个名为style的辅助函数，然后我将其引用到window.onload代码中。

在这种特殊情况下，就我输入的内容而言，我并没有节省太多（实际上，我输入的内容更多），但在更复杂的情况下，它会拯救我的是错过某些东西，重复自己，或复制/粘贴的可能性......

因此，通过调用style(el, "fontWeight", "bold");，我不必记住如何为旧浏览器设置样式，而不是新浏览器，而不是之前使用JS设置的样式，而不是（没有）关于必须在古代浏览器上工作的专业网站的人们的主题。）

如果你查看我写的style的定义，你会看到我正在调用el.style[property];通常，当我们知道我们正在寻找的东西的名称时，我们会使用一个点来分隔它们person.name; //"Bob"。在我们可能想要查找不同属性的情况下，我们使用[<property-name>]来分隔它们。

var property =“age”; 人[属性]; // 32

接下来，我使用document.querySelector( selector );来查找我想要的元素，方法是将它传递给CSS样式的选择器。

document.querySelector适用于过去6年内制作的几乎所有浏览器。

我正在抓住我想要改变其样式的元素，我抓住了我正在听的元素（等待用户点击）。

然后我将按钮的onclick设置为一个函数，该函数将触发我指定的一系列更改。
在这种情况下，onclick将改变一些样式。

您通常不想使用onclick或类似属性;通常情况下，你想使用一个名为event-registration或“监听”的过程，但对于这样一个简单的例子来说，这有点太过分了。

现在，抓住元素，将“你如何做”的实现细节从“何时'X'做'Y'”运行时细节中分离出来，并观察魔法的发生。

有趣的是，这个代码并不比另一个答案中提供的jQuery建议多得多......

...但这是一个完整的，巨大的图书馆，你必须加载（如果你甚至被允许），只是为了选择一个东西并改变它的风格。
此外，通过使用“jQuery解决方案”解决常见问题，您经常会学习不良习惯，或者，如果您没有在您面前获得快速简便的解决方案，则不会学习您需要学习的良好习惯。登记/> 大多数人使用的jQuery在引用缓存（或缺乏引用缓存）方面特别糟糕。如果广泛使用的jQuery模式在生产网站上使用，没有考虑到它们（特别是如果你不使用jQuery，而是其他类似的库），你可以谋杀你的网站的性能。

字体，字体大小和颜色更改javascript

5 个答案: