改变 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. 移动端单选插件-jquery

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. AdaBoost笔记之原理

    转自:https://www.cnblogs.com/ScorpioLu/p/8295990.html 一.Boosting提升算法 AdaBoost是典型的Boosting算法,属于Boosting ...

  3. C不同变量类型存储大小引发的BUG

    #include"stdio.h" typedef signed char int8; typedef unsigned char uint8; typedef signed sh ...

  4. 转载:ASP.NET Core 在 JSON 文件中配置依赖注入

    在以前的 ASP.NET 4+ (MVC,Web Api,Owin,SingalR等)时候,都是提供了专有的接口以供使用第三方的依赖注入组件,比如我们常用的会使用 Autofac.Untiy.Stri ...

  5. WinCE下的第二个窗口程序

    MFC写的,有些简陋,但是还是感觉不错,一个小小的计算器,各个方面的功能都完成了 但是唯独那个CEdit里面的文字不能右对齐.那个扩展风格用不了

  6. Window sevice +OWIN+webapi

    webapi正常都托管在iis上,这里引入owin,将其托管在window服务上. 第一步:创建一个服务,这里就不多描述. 第二步:引入OWIN 2.1引入bll 2.2加入api路由配置 publi ...

  7. K8S之集群搭建

    转自声明 ASP.NET Core on K8S深入学习(1)K8S基础知识与集群搭建 1.K8S环境搭建的几种方式 搭建K8S环境有几种常见的方式如下: (1)Minikube Minikube是一 ...

  8. 转： https原理：证书传递、验证和数据加密、解密过程解析

    原本连接:http://www.cnblogs.com/zhuqil/archive/2012/07/23/2604572.html 我们都知道HTTPS能够加密信息,以免敏感信息被第三方获取.所以很 ...

  9. 关于webpack一些路径

    好多新手对webpack中的路径一直感到迷茫,其实再学习webpack之前都应该去了解下nodejs的内容, 以为webpack就是个nodejs项目,所以里面涉及到的路径都是nodejs里面的写法 ...

  10. sql (9) COUNT

    COUNT() 函数返回匹配指定条件的行数.语法SQL COUNT(column_name) 语法COUNT(column_name) 函数返回指定列的值的数目(NULL 不计入):新建表 Stude ...