改变 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. js判断是否为手机端访问

    随着移动端越来越重要,pc和移动端网站后台系统可能是同一个,登录或者某个特定时期需要根据不同访问来源,跳转不同页面或者做不同的处理: 这时我们就需要js的 navigator 对象: 我们先了解一下n ...

  2. PDF文档转PNG图片 c++(转载)

    PDF文档转PNG图片 c++,例子是转载的,忘记出处了.被我收集起来了. 链接:https://pan.baidu.com/s/1iuxDHibQnvx0UYJ5m25NAg 密码:5o0c

  3. python从入门到大神---2、和Python编程相遇的日子

    python从入门到大神---2.和Python编程相遇的日子 一.总结 一句话总结: python2和python3是很不同的,连语法都不同,比如 print 函数打印结果 1.python中pip ...

  4. c# 编写windows 服务，并制作安装包

    对服务的认识有很多个阶段. 第一阶段:当时还在用c++,知道在一个进程里while(True){},然后里面做很多很多事情,这就叫做服务了,界面可能当时还用Console控制台程序. 第二阶段:知道了 ...

  5. 2018-12-1-WPF-修改-ItemContainerStyle-鼠标移动到未选中项效果和选中项背景

    title author date CreateTime categories WPF 修改 ItemContainerStyle 鼠标移动到未选中项效果和选中项背景 lindexi 2018-12- ...

  6. gcc 4步编译过程

    一. gcc编译过程  1. 预处理: 主要进行宏替换以及头文件的展开  gcc  -E   *.c  -o  *.i 2.  编译::编译生成汇编文件,会检查语法错误   gcc  -S   *.i ...

  7. cvErode和cvDilate腐蚀和膨胀函数

    Erode腐蚀,Dilate膨胀,这两个形态学函数总是成对出现,前者可以消除较小独点如噪音,后者可以使不连通的图像合并成块. void cvErode( const CvArr* src, CvArr ...

  8. Ionic POST提交使用普通表单提交数据

    使用 和 GET 拼接参数一样拼接 doLogin() { let url = "http://loginApiUrl"; var headers = new Headers() ...

  9. JAVA数据结构之红-黑树

    本篇博客我会重点介绍对红-黑树的理解,重点介绍红-黑树的查找,这里我们将要讨论的算法称为自顶向下插入,也就是把沿着树向下查找插入点 Ⅰ.平衡树和非平衡树 平衡树和非平衡树:当插入一组数据关键字是按照升 ...

  10. 关于 第三方接口支付的时候 采用post提交的方式，有两种 一种是通过 curl来进行，一种是通过js当页面加载完后跳转

    这是第一种.通过javascript页面加载完后,对表单采用 post方式提交给 第三方接口----- echo <<<_END<!DOCTYPE html PUBLIC &q ...