改变 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. Python-爬虫-HTTP协议请求之GET请求

    我们在百度搜索时,输入关键词,比如“hello”,URL发生变化,如下: https://www.baidu.com/s?wd=hello&rsv_spt=1&rsv_iqid=0xf ...

  2. bash数组总结

    bash数组操作 bash支持两种数组,一种是索引数组,一种是关联数组 索引数组 数组的值类型是任意的,索引也未必一定要连续,当做列表理解更好 下面总结下索引数组,即列表: 1. 声明 declare ...

  3. Git 学习（三）Git 创建版本库

    获取 Git 仓库 什么是 Git 仓库呢,仓库又名版本库,我们可以把他理解为一个文件夹.这个文件夹里的所有东西都需要被 Git 给管理起来,对立面每个文件的修改.编辑.删除都将被 Git 记录,以便 ...

  4. 20140321 sizeof 虚函数与虚函数表 静态数组空间 动态数组空间 位字段

    1.静态的数组空间char a[10];sizeof 不能用于1:函数类型 2:动态的数组空间new3:位字段 函数类型:int fun();sizeof(fun())计算的是返回类型的大小,并不是函 ...

  5. 多线程中Runnable 和Thread关于synchronized的疑点

    学java时和同学碰到的一道题: 转自https://blog.csdn.net/qq_40857349/article/details/102809100 某公司组织年会,会议入场时有两个入口,在入 ...

  6. Python+Django+ansible playbook自动化运维项目实战✍✍✍

    Python+Django+ansible playbook自动化运维项目实战  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受 ...

  7. java锁分析

    import java.util.concurrent.TimeUnit; class Phone//Phone.java ---> Phone.class Class.forName(); { ...

  8. Spring核心接口之InitializingBean

    一.InitializingBean接口说明 InitializingBean接口为bean提供了属性初始化后的处理方法,它只包括afterPropertiesSet方法,凡是继承该接口的类,在bea ...

  9. 2018 年 -- 15 个有意思的 JavaScript 和 CSS 库

    在Tutorialzine上你可以了解最新最酷的Web发展趋势.这就是为什么每个月都会发布一些偶然发现并认为值得你关注的最佳资源的缘由. Direction Reveal (方向展示) 该插件检测光标 ...

  10. ios position:fixed 上滑下拉抖动

    ios position:fixed 上滑下拉抖动 最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上 ...