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


改变 HTML 样式 Object.style.property=new style;的更多相关文章

  1. 通过JavaScript改变HTML样式

    语法:Object.style.property=new style; 基本属性表如下: 示例: 改变 <p> 元素的样式,将颜色改为红色,字号改为20,背景颜色改为蓝: <p id ...

  2. 改变HTML样式

    HTML DOM 允许 JavaScript 改变 HTML 元素的样式.如何改变 HTML 元素的样式呢? 语法: Object.style.property=new style; 注意:Objec ...

  3. 8 HTML DOM 元素的查找与改变&改变CSS样式&HTML事件

    HTML DOM(Document Object Model)文档对象模型 当网页被加载时,浏览器会创建页面的文档对象模型. HTMLDOM 定义了用于HTML的一系列标准的对象.通过DOM,你可以访 ...

  4. 改变CSS样式

    改变CSS样式 1.改变HTML元素样式的语法 //改变HTML样式的语法 document.getElementById(id).style.property = new style 例子: < ...

  5. Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template

    在上一篇,介绍了Visual State Manager视觉状态管理器,其中涉及到控件的样式(Style)和模板(Template),本篇将详细介绍样式(Style)和模板(Template)在Sil ...

  6. 关于obj.currentStyle.property、window.getComputedStyle(obj,null).property、obj.style.property的理解

    首先是obj,style.property 我一直用这个obj.style.property这个属性来修改内联和外联的obj属性,但是从网上看到了obj.style.property居然只能读取内嵌的 ...

  7. 样式和模板快速入门Style,Template

    http://www.cnblogs.com/jv9/archive/2010/04/14/1711520.html 样式(Style)和模板(Template)的定义 在Silverlight中,样 ...

  8. js中获取样式的俩种方法 style.color和style['color'] 区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 笔记：css3伪选择器改变滚动条样式

    现在我打开支持前缀-webkit-的浏览器,也就是说只要支持前缀为-webkit-的浏览器才有效果 <!doctype html> <html lang="en" ...

随机推荐

  1. Unity3D中的线程与协程

    线程 Unity3D是以生命周期主线程循环进行游戏开发. Unity3D中的子线程无法运行Unity SDK(开发者工具包,软件包.软件框架)跟API(应用程序编程接口,函数库). 限制原因:大多数游 ...

  2. 其它课程中的python---1、python基础

    其它课程中的python---1.python基础 一.总结 一句话总结: 可以先把视频平台搭起来,这样学习效率会高很多,而且有额外收益 1.python的优势有哪些? 一个广泛的标准库 扩展性:比如 ...

  3. 2019 牛客多校第三场 B Crazy Binary String

    题目链接:https://ac.nowcoder.com/acm/contest/883/B 题目大意   给定一个长度为 N 的 01 字符串,输出最长子串和子序列的长度,满足其中 0 和 1 的个 ...

  4. angularJS和requireJS和angularAMD

    最近因为要用到angularJS开发项目,因为涉及到的静态资源比较多,所以想把js文件通过requireJS来按需加载,这两个框架以前都使用过,但是结合到一起还没有用过,那就试一下,看能否达到目的. ...

  5. 21-4indexOf

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 结对编程收获-Core10组-PB16110698

    本周结对编程追加作业:记录收获.坦白说,我的收获多而杂,一时不知从何说起,以下试图从各方面简要谈谈. 一.编程能力收获 从编程能力方面,我收获的主要是类的设计思路和算法设计.在作业要求blog的指引下 ...

  7. shell 命令 用户管理

     1. 查看保存用户相关信息的文件 [ cat /etc/passwd ]  [linux    :    x    :   1000  :   1000   :   linux,,,   :    ...

  8. js获取当前网址Url

    js获取当前路径并截取 var str = window.location.href;// str = 'https://localhost:8080/mark' var index = str .l ...

  9. 选择器zuoye

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  10. MySQL架构和索引

    MySQL架构 逻辑架构图: 大概分为四层,这个见仁见义,有不同的分法: 第一层Connectors:处理不同语言与SQL的交互 第二层Connection Pool :连接池,管理缓存用户连接,线程 ...