zoukankan      html  css  js  c++  java

  • 改变 HTML 样式 Object.style.property=new style;

    改变 HTML 样式

    HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？

    语法:

    Object.style.property=new style;

    注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

    基本属性表（property）:

    注意:该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。

    看看下面的代码:

    改变 <p> 元素的样式，将颜色改为红色，字号改为20,背景颜色改为蓝：

    <p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

    结果:

    任务

    现在我们来改变下HTML中元素的CSS样式:

    1. 在右边编辑器中，第12行补充代码，修改h2标签的样式，将颜色设为红色。

    2. 在右边编辑器中，第13行补充代码，修改h2标签的样式，将背景颜色设为灰色(#CCC)。

    3. 在右边编辑器中，第14行补充代码，修改h2标签的样式，将宽设为300px。


    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
  <h2 id="con">I love JavaScript</h2>
  <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
  <script type="text/javascript">
    var mychar= document.getElementById("con");
    mychar.style.color="yellow";
    mychar.style.backgroundColor:"#CCC";
    mychar.style.width=300px;
  </script>
</body>
</html>
  • 相关阅读:
    【转】mxGraph教程-开发入门指南
    利用IPC通道进行进程间通信（C#）
    C++引用指针 & 构造函数
    MySQL配置主主及主从备份
    MySQL 主从热备份(读写分离)
    SqlServer双机热备技术实践笔记
    c#中的弱引用:WeakReference
    px、em、rem、%、vw、vh、vm这些单位的区别
    深浅clone
    JavaScript-原始值和引用值
  • 原文地址：https://www.cnblogs.com/yongbin668/p/5592822.html
Copyright © 2011-2022 走看看