改变 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. 给标签设置disabled属性后提交不了数据

    项目中遇到给select标签添加disabled属性然后提交表单的时候不能提交该表单的数据到后台, readonly属性对提交数据没有限制,但是readonly属性对radio.select.chec ...

  2. LUOGU P4560 [IOI2014]Wall 砖墙 (线段树)

    传送门 解题思路 线段树打标记,刚开始想复杂了,维护了四个标记.后来才知道只需要维护一个最大值最小值即可,然后更新的时候分类讨论一下. 代码 #include<iostream> #inc ...

  3. char*转LPCWSTR【转载】

    文章转载自https://blog.csdn.net/zhouxuguang236/article/details/8761497 通过MultiByteToWideChar函数转换 MultiByt ...

  4. Python入门 mac系统/linux系统 安装python （一）

    mac 系统 在命令行里,不会用命令行就别学编程了,自行查一下怎么用吧 brew install python 如果没有brew这个命令: 在mac终端下执行 /usr/bin/ruby -e &qu ...

  5. java.sql.SQLException: ORA-12704: 字符集不匹配

    INFO:HibernateSimpleDao----queryForListWithSql:SELECT site_id as id ,MAX(case attr_name when 'siteNa ...

  6. vim 命令行模式 操作指令

      复制n行: nyy 粘贴:p 剪切(删除)n行: ndd 剪切 ( 删除 ) n个字符:nx 移动光标到第一行 : gg 移动光标到最后一行 : G 设置格式  :gg=G 返回上一次操作前(撤销 ...

  7. JS对象 提取指定数目的字符substr() substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。

    提取指定数目的字符substr() substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串. 语法: stringObject.substr(startPos,length ...

  8. AtCoder Beginner Contest 132 E - Hopscotch Addict

    bfs 位置+状态 just need to calculate min value(only it is useful), so O(1*x) 挺有趣的一道题... #include <cst ...

  9. 【JZOJ4616】二进制的世界

    description analysis \(DP\),这是\(Claris\)神仙的题-? 既然是\(2^{16}\)可以拆成两个\(2^8\)的位运算 照着打就行了 code #include&l ...

  10. 用while实现登录操作(3次过后，输入yes,使counter置0,还可以玩)

    用while实现登录操作(输入yes,使counter置0,还可以玩)#_author:Administrator#date:2019/10/24user_name="star"p ...