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

Question

我试图让这段代码通过点击按钮更改预先编写的文本字体、字体大小和颜色，但我无法让它工作，这是我目前所做的，我卡住了。有人有什么想法吗？

<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

我认为你应该这样做：

<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 2

试试这个，而不是 js 代码：

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

Answer 3

你可以试试这个：

<!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 4

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

<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 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>

看看；

我冒昧地在其中添加了 "required" HTML 的其他部分（尤其是 DOCTYPE）。你现在不需要知道它的用途，但它会在未来解决很多问题，如果你总是将它包含在你写的每个 HTML 页的顶部，如果你想要真正的人们使用该页面（基本上，它使 Internet Explorer < IE10 变得不那么糟糕）。

我将其分解为更合理的部分，就现实世界而言 JavaScript。

在大多数编程语言中，您希望将代码分解成更小的部分，以便于阅读和使用。
JavaScript 差别不大。

我已经将设置样式的行为分解成它自己的辅助函数

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

这里的问题是，任何带有连字符（"font-size"、"background-color"）的 CSS "style" 在设置 [=] 中的值时需要使用驼峰命名法82=].

el.style.backgroundColor = "black";

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

在这种特殊情况下，就我输入的内容而言（实际上，我输入的更多），我并没有节省很多，但在更复杂的情况下，它会节省我多少, 是在重复自己或 copy/pasting...

中遗漏某些东西的机会

因此，通过调用 style(el, "fontWeight", "bold");，我不必记住如何为旧浏览器、新浏览器、早期使用 JS 设置的样式以及没有设置的样式设置样式t（与必须在旧版浏览器上运行的专业网站有关的人们的主题）。

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

var 属性 = "age"; 人[属性]； // 32

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

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

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

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

您通常不想使用 onclick 或类似的属性；通常，您想使用一个名为 event-registration 或 "listening" 的进程，但对于这样一个简单的示例，这有点过头了。

现在，抓住元素，将 "how you do it" 实现细节与 "when 'X' do 'Y'" 运行时细节分开，然后观看奇迹发生。

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

...但这是一个完整的巨大库，您必须加载（如果您被允许的话），只是为了 select 一个东西并改变它的样式。
此外，通过使用 "jQuery solution" 解决常见问题，您经常会养成坏习惯，或者，如果没有快速简便的解决方案，您就不会养成需要养成的好习惯。
jQuery，正如大多数人所使用的那样，对引用缓存（或缺乏引用缓存）特别不利。如果在生产网站上使用广泛使用的 jQuery 模式，而不考虑它们（特别是如果您不使用 jQuery，而是使用其他一些类似的库），您可能会扼杀网站的性能。

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

font,font size, and color change javascript

html

javascript

css

fonts