js学习笔记82——操作内联样式

通过js修改元素的样式
查参考手册
内联样式
读取元素的样式

看如下代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;}</style>
</head>
<body><button id="btn01">点我一下</button><br /><br /><div id="box1"></div>
</body>
</html>

如何通过点击按钮来改变box1的大小？

通过js修改元素的样式

语法：元素.style.样式名 = 样式值

 <script>window.onload = function(){var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");btn01.onclick = function(){box1.style.width = "200px";};};</script>

如果想修改背景颜色，可以这么写吗？

box1.style.background-color = "yellow";

会报措

那如何做呢？

用驼峰命名法

     window.onload = function(){var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");btn01.onclick = function(){box1.style.width = "200px";box1.style.height = "200px";box1.style.backgroundColor = "yellow";};};

查参考手册

参考手册

内联样式

可以看到，通过style属性设置的样式都是内联样式。
内联样式的好处是，设置的样式优先级比较高。
当然优先级最高的不是内联样式，如果我给背景颜色设置！important，则它的优先级最高。js将不起作用。所以尽量不要使用!important。

     #box1{width: 100px;height: 100px;background-color: red !important;}

读取元素的样式

语法：元素.style.样式名

         var btn02 = document.getElementById("btn02");btn02.onclick = function(){alert(box1.style.height);};

从上图可以看到，我直接点btn02读取到的是空，得先按btn01再按btn02才获取到样式。为什么？

通过style属性设置和读取的都是内联样式，所以如果我直接点击获取，由于高度并不在内联样式里，所以读不到。

js学习笔记82——操作内联样式相关推荐

JS学习笔记13-操作内联样式
一.通过JS修改元素的样式语法: 元素.style.样式名=样式值(字符串). box.style.width="300px"; 注意:如果css样式名中含有-,这种名称在JS中 ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
第 10 节操作内联样式
第10节操作内联样式操作内联样式操作内联样式 1.通过JS修改元素的样式: 1)语法:元素.style.样式名 = 样式值注意: 如果CSS的样式名中含有 -,这种名称在JS中是不合法的,比如 ...
使用DOM操作内联样式
使用DOM操作css 通过JS修改元素的样式语法:元素.style.样式名 = 样式值注意:如果css的样式名中含有 - ,这种名称在JS中是不合法的比如 background-color 需要将 ...
C++学习笔记之——引用内联函数
本文为原创作品,转载请注明出处欢迎关注我的博客:http://blog.csdn.net/hit2015spring和http://www.cnblogs.com/xujianqing/ 作者 ...
步步为营 .NET 代码重构学习笔记三、内联方法(Inline Method)
一.Inline Method 概述一个函数,其本体(method body)应该与其名称(method name)同样清楚易懂. 动机(Motivation) 以简短的函数表现动作意图,这样会使 ...
CSS学习笔记-【内联样式、内部样式、外部样式表】 AND 2018-11-21（21:18）
一.内联样式 1.在DIV标签中添加内联样式. 添加style属性 . 在style中属性和值得表示方法为: style="属性:值;属性:值"; 例如: <div styl ...
Vue.js 学习笔记第5章内置指令
本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车回顾一下第2.2节,我们己经介绍过指令(Di ...
Vue.js 学习笔记七控制样式
Vue.js可以灵活的控制样式我们首先随便写2个样式 <style>.divCss {background-color: green;width:400px;height:400px;} ...

js学习笔记82——操作内联样式

js学习笔记82——操作内联样式

通过js修改元素的样式

查参考手册

内联样式

读取元素的样式

js学习笔记82——操作内联样式相关推荐

最新文章

热门文章