style属性
style加样式是加在行间，取样式也是在行间取；
我们来看下面这段代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
#div1 {
width: 200px;
height: 200px;
border: 1px solid black;
background-color: green;
}
</style>
<script>
function toRed() {
var oDiv = document.getElementById("div1");
oDiv.style.backgroundColor = "red";
}
</script>
</head>
<body>
<input type="button" value="changeToRed" onclick="toRed()" />
<div id="div1"></div>
</body>
</html>
这段代码定义了一个按钮和一个<div>元素，并在<style>元素中设置了<div>元素的背景颜色为绿色。通过点击按钮，改变<div>元素的背景颜色为红色。
在chrome的审查元素中，没有点击按钮前，<div>元素的行内样式是下面这个样子：
点击了按钮之后，变成了这样子：
我们可以看到，点击按钮之后，<div>元素的行内样式增加了 style = "background-color: red;"
我们把函数改为alert <div>元素的背景颜色，代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
#div1 {
width: 200px;
height: 200px;
border: 1px solid black;
background-color: green;
}
</style>
<script>
function alertColor() {
var oDiv = document.getElementById("div1");
alert(oDiv.style.backgroundColor);
}
</script>
</head>
<body>
<input type="button" value="alertColor" onclick="alertColor()" />
<div id="div1"></div>
</body>
</html>
代码执行后弹出一片空白，并不是我们意想中的green。这是因为background-color: green; 这条规则定义在<style>元素中，而style.backgroundColor只能获取到行内样式，但我们并没有在<div>元素中定义background-color，因此会弹出一片空白。
style属性的更多相关文章
- dede文章调用时过滤调 body里面的style属性和值
dede 发布文章的时候会在里面的标签中添加一些style 属性,现在改网站想去掉这些属性和里面的值,因为文章太多所以就用下面的方法 \include\arc.listview.class.php 在 ...
- css字体样式(Font Style),属性
css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...
- JS中style属性
解决办法:1.先定义一个CSS规则,然后this.className=''2.document.getElementByIdx_x("a").style.cssText=" ...
- CSS和JavaScript标签style属性对照表
CSS和JavaScript标签style属性对照表一般情况是把"-"去掉,后面字母用大写. CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border ...
- 【jQuery】总结:筛选器、控制隐藏、操作元素style属性
筛选器 -> http://blog.csdn.net/lijinwei112/article/details/6938134 常用到的: $("tr[id=ac_"+id+ ...
- HTML的style属性
HTML的style属性 HTML的style属性提供了一种改变HTML样式的通用方法.style是在HTML4版本中引用的,它是一种首选的改变HTML元素样式的方法.可以使用style直接的将样式添 ...
- 解决Struts2.2.20版本的标签不支持style属性的问题
我先把Exception错误信息贴出来:org.apache.jasper.JasperException: /WEB-INF/jsp/topicAction/addUI.jsp (line: 40, ...
- JavaScript之Style属性学习
当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用JavaScript去控制元素的表现形式 ...
- JavaScript CSS Style属性对照表
JavaScript CSS Style属性对照表 盒子标签和属性对照 CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border border border-bottom ...
- CSS用HTML中的style属性替换
废话不多说上代码: 1.用CSS给文字添加背景色: <html> <head> <style type="text/css"> body {ba ...
随机推荐
- 【SDOI2018】反回文串（【ARC064 F】Rotated Palindromes 加强版）
题意 给你一个正整数 \(n\),求有多少字符集为 \(1\) 到 \(k\) 之间整数的字符串,使得该字符串可以由一个长度为 \(n\) 的回文串循环移位得到. ARC原题 \(100\%\) 的数 ...
- seq2seq keras实现
seq2seq 是一个 Encoder–Decoder 结构的网络,它的输入是一个序列,输出也是一个序列, Encoder 中将一个可变长度的信号序列变为固定长度的向量表达,Decoder 将这个固定 ...
- 从输入URL到页面加载全过程
从简单讲: 1. DNS域名解析:2. 建立TCP连接:3. 发送HTTP请求:4. 返回响应结果:5. 关闭TCP连接:6. 浏览器解析HTML:7. 浏览器布局渲染: 大家基本上都知 ...
- 云原生相关名词Istio发音
服务网格词汇 Istio,希腊语言中大概是风帆的意思, 发音 [iːst'iəʊ] ,相当于中文的 伊斯特亿欧
- 详解 @MapperScan 注解和 @Mapper 注解
实际上,这是一个非常简单的问题.我并没有一口回绝他,让他去百度.因为,新人都会经历这个过程.好不容易,问你一次,你直接让他百度,会打击到他的.而且,别人会觉得你摆架子. @Mapper 这个注解的定义 ...
- 3622 假期(DP+单调队列优化)
3622 假期 时间限制: 1 s 空间限制: 64000 KB 题目等级 : 黄金 Gold 题目描述 Description 经过几个月辛勤的工作,FJ决定让奶牛放假.假期可以在1-N天内任意选择 ...
- HDU 6154 CaoHaha's staff（2017中国大学生程序设计竞赛 - 网络选拔赛）
题目代号:HDU 6154 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6154 CaoHaha's staff Time Limit: 2000/1 ...
- JavaWeb-SpringBoot(抖音)_一、抖音项目制作
JavaWeb-SpringBoot(抖音)_一.抖音项目制作 传送门 JavaWeb-SpringBoot(抖音)_二.服务器间通讯 传送门 JavaWeb-SpringBoot(抖音)_三.抖音项 ...
- HBuilderX中自动转换px为upx
uni-app 使用 upx 作为默认尺寸单位, upx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应.uni-app 规定屏幕基准宽度750upx.但如果设计稿不是750px,那换算单位可头疼 ...
- HighCharts 动态设置 series
var series = new Array(); var map = response.extend.map; $.each(map, function (key,values) { series. ...