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 ...
随机推荐
- hexo主题hexo-theme-yilia文章太长，截断按钮文字的实现
文章太长,截断按钮文字不是通过配置文件_config.yml实现的,而是在文章内容里实现,在你想截断的文章位置加上 <!-- more --> 就可以实现了! 参考博客:hexo-them ...
- Dom修改元素样式
提纲:我们可以通过js来修改元素的大小,颜色,位置等样式 1.element.style 行内样式的操作 2.element.className ...
- 2019CCPC秦皇岛赛区（重现赛）- F
链接: http://acm.hdu.edu.cn/contests/contest_showproblem.php?pid=1006&cid=872 题意: Z 国近年来一直在考虑遏制国土沙 ...
- Codeforces 884E E. Binary Matrix
题 OvO http://codeforces.com/contest/884/problem/E 884e 解 考虑并查集,每个点向上方和左方的点合并,答案即为1的总数减去需要合并的次数 由于只有1 ...
- CentOS 7 下Emacs无法录入中文的问题
Emacs下的各种快捷键操作,实在是太方便了,像毒药一样让人上瘾! 问题描述: 最近重装了系统以及各种软件,但是碰到一个奇怪的问题,安装了极点五笔中文输入法,系统语言也设置为中文,结果在vim.ged ...
- input框输入手机号码分隔显示
在input框输入手机号码时,自动加入空格按照3,4,4位显示,如: 实现方法如下: <label>手机号码</label><input type="text& ...
- Mysql入门-对表数据的增删改查
这一部分是最简单的,也是最麻烦的.简单是因为其实只包括增删该插四个部分.大体上看,增加数据.删除数据.修改数据.查询数据都不麻烦啊,我们日常都是常用的.这个谁不会呢?以前在培训机构学mysql的时候, ...
- TTTTTTTTTTTTTTTT #7 div1 A Breadth-First Search by Foxpower 在线LCA（倍增）,模拟
A - Breadth-First Search by Foxpower Time Limit:2000MS Memory Limit:131072KB 64bit IO Format ...
- Linux下SHA256校验
一.将Hash: SHA256文件和需要检验的文件放在同一个文件夹内 二.$sha256sum -c SHA265 文件 输出: 校验文件:ok
- 2016 Multi-University Training Contest 4 部分题解
1001,官方题解是直接dp,首先dp[i]表示到i位置的种类数,它首先应该等于dp[i-1],(假设m是B串的长度)同时,如果(i-m+1)这个位置开始到i这个位置的这一串是和B串相同的,那么dp[ ...