JavaScript如何动态更改CSS页面样式1

JavaScript如何动态更改CSS页面样式

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

JavaScript如何动态更改CSS页面样式？如果要在JavaScript中更改页面样式，需要更改元素的样式属性，下面我们就来看看具体的实现内容。

JavaScript

我们来直接看示例

代码如下

JavaScriptChangeCssTextBox.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
      <script type="text/javascript">
        function SetColor(foreColor, backColor) {
        target = document.getElementById("page");        
         if (target != null) {
          target.style.backgroundColor = document.form1.Text1.value;;
          target.style.color = document.form1.Text2.value;
        }
      } 
      </script>
</head>
<body id="page">
  <form name="form1">
    <div>背景色<input id="Text1" type="text" /></div>
    <div>前景色<input id="Text2" type="text" /></div>
    <input id="Button1" type="button" value="button" onclick="SetColor()"/>
  </form>
</body>
</html>

说明：

单击表单上的按钮执行用JavaScript编写的SetColor（）函数。

function SetColor(foreColor, backColor) { target = document.getElementById("page"); if (target != null) { target.style.backgroundColor = document.form1.Text1.value;; target.style.color = document.form1.Text2.value; } }

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function onLoad() { param = GetQueryString(); target = document.getElementById("page"); if (param != null) { if (param["bgcolor"] != null) { target.style.backgroundColor = "#" + param["bgcolor"]; } if (param["fgcolor"] != null) { target.style.color="#"+ param["fgcolor"]; } } } function GetQueryString() { if (1 < document.location.search.length) { // 获取不包括第一个字符的字符串（？符号） var query = document.location.search.substring(1); // 使用查询分隔符（＆）将字符串拆分为数组 var parameters = query.split('&'); var result = new Object(); for (var i = 0; i < parameters.length; i++) { // 拆分为参数名称和参数值 var element = parameters[i].split('='); var paramName = decodeURIComponent(element[0]); var paramValue = decodeURIComponent(element[1]); // 将参数添加到参数作为关联数组，参数名称为键 result[paramName] = decodeURIComponent(paramValue); } return result; } return null; } </script> </head> <body id="page"> <div>这是一个测试页面</div> <div>啦啦啦啦</div> <div>哈哈哈哈</div> </body> </html>

说明：

它类似于以前的HTML文件，但从HTML文件的参数中获取颜色代码并更改前景色和背景色

运行结果：

执行HTML文件，将显示如下所示的效果。

2345截图20181130095728.png