DOM操作style样式——link、style、p style=''的区别

访问元素的样式

通过link元素包含的外部样式和通过style元素定义的嵌入样式不能直接通过DOM读取，DOM只能读取html元素中style属性定义的样式

1.html代码

 1 <!DOCTYPE html>
 2 <html>  3  4 <head>  5 <title>JavaScript-DOM2和DOM3</title>  6 <meta charset='utf-8' />  7 <script type="text/javascript" src='javascript.js'></script>  8 <link rel="stylesheet" type="text/css" href="demo.css">  9 <style type="text/css"> 10  #testText { 11  margin-top: 20px; 12 } 13 </style> 14 </head> 15 16 <body> 17 <p id="testText" style="font-size: 18px;">测试文本</p> 18 </body> 19 20 </html>

2.css代码

 1 @charset 'utf-8';
 2 * {
 3  margin: 0;  4  padding: 0;  5 }  6  7 body {  8  position: relative;  9 } 10 11 #testText { 12  color: red; 13  padding: 5px; 14 }

3.js代码

 1 function addLoadEvent(func) {
 2     var oldonload = window.onload;  3 if (typeof window.onload != 'function') {  4 window.onload = func;  5 } else {  6 window.onload = function() {  7  oldonload();  8  func();  9  } 10  }; 11 } 12 addLoadEvent(one); 13 addLoadEvent(two); 14 15 //DOM2级样式 16 function two() { 17 var testText = document.querySelector('#testText'); 18 console.log(testText.style.color); //通过link元素链接的外部样式无法读取 19 console.log(testText.style.backgroundColor); //通过style元素定义的嵌入式样式无法读取 20  console.log(testText.style.fontSize); 21 testText.style.color = '#000'; 22 testText.style.float = 'left'; //float为JavaScript中的保留字，不能用作属性名，用cssFloat 23 testText.style.boxShadow = '2px 2px 12px -2px gray'; //css中为box-shadow,JavaScript中使用驼峰式 24 console.log(testText.style.length); //应用给元素的css属性的数量 25 for (var i = 0, len = testText.style.length; i < len; i++) { 26 var pro = testText.style[i]; //testText.style.item(i),获取css属性名 27 var value = testText.style.getPropertyValue(pro); //通过css属性名获取属性值 28 console.log(pro + ':' + value); 29 testText.style.removeProperty('font-size'); 30  }; 31 }

转载于:https://www.cnblogs.com/guiren/p/4917567.html

DOM操作style样式——link、style、p style=''的区别相关推荐

【JavaScript】DOM 操作元素样式和元素类名
文章目录 [JavaScript]DOM 操作元素样式和元素类名一. 操作元素样式 (1)操作行内元素 1. 获取元素的样式 2. 设置元素的样式 (2) 操作非行内元素和行内元素 1. 获取元素的 ...
ESP32 LVGL8.1 ——Style local style 样式当地的风格 (Style 11)
提示:本博客作为学习笔记,有错误的地方希望指正文章目录一.样式当地的风格简介二.Style Line API 三.示例一.样式当地的风格简介本次主要讲述lvgl的样式当地的风格,我们前面 ...
js DOM操作元素样式
element.style 行内样式操作 element.className 类名样式操作 1. element.style 上下文是获取到的元素: 通过element.style.某个css样式设 ...
Openlayers Style 样式演示
Openlayers style样式演示 OpenLayers 教程 Openlayers style样式演示在线示例 OpenLayers 教程 Openlayers 对样式的控制是通过一个通用的 ...
23.Vue绑定style样式
目录 1.style样式对象写法 2.style样式数组写法 3.总结 22.Vue绑定class样式_爱米酱的博客-CSDN博客为了讲好class样式,我们这里提前准备了7个样式作为例子来讲解. b ...
JS DOM获取标签/元素style样式
JS DOM获取标签/元素style样式文章目录 JS DOM获取标签/元素style样式 .style getComputedStyle() .style 只能获取行内样式,不能获取style标签 ...
用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）
CSS样式定义方法大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. 1 < ...
外部样式表声明的样式并不会进入style对象
在网页设计当中,我们注重网页的行为(js).结构(HTLM).样式(css)分离开内联样式表或者内部样式表声明的样式信息都会进入style对象. 我们可以测试一下: 但是我们的外部样式表,也就是通过 ...
js改变style样式和css样式
js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下: [html] view plaincopy < ...
swiper6.0改造 “翻页按钮”：自定义style样式和position - 案例篇
文章目录 swiper6.0改造 "翻页按钮":自定义style样式和position(含效果图.代码.使用手册) 需求场景 · 描述如下: 效果图 · gif 动画: 注意事项: ...

DOM操作style样式——link、style、p style=''的区别

DOM操作style样式——link、style、p style=''的区别相关推荐

最新文章

热门文章