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. python爬取豆瓣小组700+话题加回复啦啦啦python open file with a variable name

    需求:爬取豆瓣小组所有话题(话题title,内容,作者,发布时间),及回复(最佳回复,普通回复,回复_回复,翻页回复,0回复) 解决:1. 先爬取小组下,所有的主题链接,通过定位nextpage翻页获 ...

  2. Python介绍以及Python 优缺点

    Python是先编译成字节码,然后在解释执行的一门语言,而不是单纯的解释型语言 Python应用场景: Web应用开发. 操作系统管理,服务器运维的自动化脚本, 网络爬虫 科学计算 桌面软件 游戏 服 ...

  3. django中配置允许跨域请求

    对于django 安装django-cors-headers,详情请看官方文档 pip install django-cors-headers 配置settings.py文件 a.在INSTALLED ...

  4. Java 字符串总结

    三种字符串类:String,StringBuilder,StringBuffer String类 1. 常用构造器 构造器   public String(char value[])   public ...

  5. Maven_运行时环境

    首先,创建一动态web工程. Src-----源码目录 build文件夹在java结构下看不出,但可以在Navigator下可以看出是个源码目录,如下图: 以下图中是运行时环境. 它其实是一组jar包 ...

  6. print pdf bug & DOCTYPE

    print pdf bug & DOCTYPE OK with <!DOCTYPE html> <!DOCTYPE html> <html lang=" ...

  7. [BZOJ2594] [Wc2006]水管局长数据加强版(LCT + kruskal + 离线)

    传送门 WC这个题真是丧心病狂啊,就是想学习一下怎么处理边权,给我来了这么一个破题! ORZ hzwer 临摹黄学长代码233 但还是复杂的一匹 理一下思路吧 题目大意:给定一个无向图,多次删除图中的 ...

  8. [luoguP2701] [USACO5.3]巨大的牛棚Big Barn(DP)

    传送门 经典问题. 找出最大的不包含 1 的正方形. f[i][j] 表示 以 (i,j) 结尾的最大的不包含 1 的正方形 f[i][j] = min(f[i - 1][j], f[i][j - 1 ...

  9. ACM数论常用知识完全解读

    此版本纯属扯淡....... 一个一个来起.

  10. hdu 5050 java程序求大数最大公约数

    import java.io.*; import java.math.*; import java.util.*; import java.text.*; public class Main { pu ...