第60天：js常用访问CSS属性的方法

2024-05-02 13:20:09

一、 js 常用访问CSS 属性的方法

我们访问得到css 属性，比较常用的有两种：

1. 利用点语法

box.style.width box.style.top

点语法可以得到 width 属性和 top属性带有单位的。 100px

但是这个语法有非常大的缺陷，不变的。

后面的width 和 top 没有办法传递参数的。

var w = width;

box.style.w

2. 利用 [] 访问属性

语法格式: box.style[“width”]

元素.style[“属性”];

console.log(box.style["left"]);

最大的优点：可以给属性传递参数

二、得到css 样式

我们想要获得css 的样式， box.style.left box.style.backgorundColor

但是它只能得到行内的样式。

但是我们工作最多用的是内嵌式或者外链式。

怎么办？

核心：我们怎么才能得到内嵌或者外链的样式呢？

1、 obj.currentStyle ie opera 常用

外部（使用<link>）和内嵌（使用<style>）样式表中的样式（ie和opera）

2、window.getComputedStyle("元素", "伪类") w3c

两个选项是必须的，没有伪类用 null 替代

3 、兼容写法：

我们这个元素里面的属性很多， left top width ===

我们想要某个属性，就应该返回改属性，所有继续封装返回当前样式的函数。

 1 1    var demo = document.getElementById("demo");
 2 2      function getStyle(obj,attr) {  //  谁的      那个属性
 3 3          if(obj.currentStyle)  // ie 等
 4 4          {
 5 5              return obj.currentStyle[attr];
 6 6          }
 7 7          else
 8 8          {
 9 9              return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
10 10          }
11 11      }
12 12      console.log(getStyle(demo,"width"));

转载于:https://www.cnblogs.com/le220/p/7705891.html

第60天：js常用访问CSS属性的方法相关推荐

css默认的font-size是什么意思,常用的css属性：font-size等
原标题:常用的css属性:font-size等今天给大家介绍一些常用的css属性: 1 font-size:用于设置字体大小 font-size:20px; font-size:150% 2 fon ...
常用的CSS属性列表汇总
常用的CSS属性列表汇总近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下. 表格最右列的数字标识支持的CSS最低版本. 01. CSS背景属性(Background) 属 ...
html5属性单词,常用的CSS属性的英文单词总结及用法、解释
在div css制作中常用的CSS属性的英文单词介绍.解释与css样式用法总结.这些单词无需一定要记住会拼写,但是要求看见他们就能认识他们并知道他们的属性及用法,这里有个记住他们属性的技巧就是多制作和 ...
CSS——（CSS样式规则，CSS样式表单，选择器，常用的CSS属性）
CSS(Cascading Style Sheets,层叠样式表单)是由W3C所提出,主要的用途是控制网页的外观,也就是定义网页的编排,显示,格式化及特殊效果,有部分功能与HTML重叠. 1.CSS样 ...
JavaScript 访问对象属性和方法及区别
这篇文章主要介绍了浅析JavaScript访问对象属性和方法及区别的相关资料,仅供参考属性是一个变量,用来表示一个对象的特征,如颜色.大小.重量等:方法是一个函数,用来表示对象的操作,如奔跑.呼吸. ...
常用的CSS属性的英文单词总结及用法、解释
1.(盒子)布局排版类 - TOP float - 浮动:设置块元素的浮动效果.可选常用到参数left.right : width - 宽:确定盒子本身的宽度,可以使盒子的宽度不依靠它所包含的内容多少 ...
css超过两行显示为..._使用这些不太常用的CSS属性，布局效率上又提高了一个层次...
有很多CSS属性,有些人不了解,或者他们了解它们,但是忘记在需要时使用它们.其实,有时候我们用 JavaScript 来实某些交互,CSS 一个属性就能搞定了,这可以大大节约我们编码的时间. 作为前端 ...
JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问 ...
js Dom对象的属性与方法
1.对象集合: (1).all[]; (2).images[]; (3).anchors[]; (4).forms[]; (5).links[]; 2.属性: document.cookie;设置或返 ...

最新文章

热门文章