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>

结果:

JavaScript--改变 HTML 样式的更多相关文章

  1. javascript改变style样式和css样式

    转载 在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的 ...

  2. js | javascript改变style样式和css样式

    转载 在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的 ...

  3. 通过JavaScript改变HTML样式

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

  4. JavaScript:改变 HTML 样式

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. jQuery中添加/改变/移除改变CSS样式例子

    在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧.     CSS()方法改变CSS样式 ...

  6. js改变css样式

      CreateTime--2017年10月31日15:14:12 Author:Marydon js改变css样式 1.js改变单个css样式 HTML部分 <div id="tes ...

  7. 改变HTML样式

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

  8. 改变 HTML 样式 Object.style.property=new style;

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

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

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

  10. 【问题】js 改变鼠标样式,chrome浏览器不能立即更新,暂没有解决办法

    元素的css,cursor可以改变鼠标样式.也就是鼠标放到元素上去时,改变为相应状态. 通过JS改变cursor时,我发现chrome浏览器不能立即更新,需要动一下鼠标才行,试了几个其它浏览器都是立即 ...

随机推荐

  1. subprocess操作命令

    import subprocess 一. run()方法 --->括号里面传参数,主要有cmd, stdout, shell, encoding, check 1.直接传命令 2.命令带参数要以 ...

  2. Java 中 break和 continue 的使用方法及区别

    break break可用于循环和switch...case...语句中. 用于switch...case中: 执行完满足case条件的内容内后结束switch,不执行下面的语句. eg: publi ...

  3. git 连接github.com 并配置密钥

    传送门:http://www.jianshu.com/p/ff1034ed270e #备份ssh cd ~/.ssh $ ls $ mkdir key_backup //创建备份文件夹 $ cp id ...

  4. vue-cli中src/main.js 的作用

    // The Vue build version to load with the `import` command // (runtime-only or standalone) has been ...

  5. BZOJ 1370 团伙

    两个认识的人不是朋友就是敌人,且满足: 1,朋友的朋友是朋友: 2,敌人的敌人是朋友. 一群朋友组成一个团伙,给出m个信息,求有多少个团伙. 用并查集,把一个点x拆成x和x’ 若a与b为朋友,则将a与 ...

  6. 【codeforces 707C】Pythagorean Triples

    [题目链接]:http://codeforces.com/contest/707/problem/C [题意] 给你一个数字n; 问你这个数字是不是某个三角形的一条边; 如果是让你输出另外两条边的大小 ...

  7. reids桌面管理工具:RedisDesktopManager下载、使用

    概要:一款好用的Redis桌面管理工具,支持命令控制台操作,以及常用,查询key,rename,delete等操作. 下载软件,请点击下面链接,进入下载页,选择对应版本: https://redisd ...

  8. Linux/windows查看设置环境变量指令

    一.Linux: 1.查看所有环境变量的指令 方法1:$:export (export命令作用是显示.设置或删除linux环境变量:) 方法2:$:env 2.查看某个指定的环境变量 方法1:$:ex ...

  9. Linux下汇编语言学习笔记74 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  10. MYSQL中插入数据以及修改数据的部分方法

    #插入/增加:使用INSERT #修改:使用ALTER #修改数据类型ALTER TABLE table02 MODIFY COLUMN cname VARCHAR(100);ALTER TABLE ...