封装获取某个元素指定css属性值的方法

最新推荐文章于 2023-11-19 13:18:25 发布
最新推荐文章于 2023-11-19 13:18:25 发布
阅读量1.4k 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lusizhifei/article/details/56020696
版权
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封装style</title>
<style>
/*#demo{width:200px;height:300px;}*/


</style>
</head>
<body>
<!-- <div id="demo">阿萨德股份大概</div> -->
</body>
<script type="text/javascript" src="封装DOM元素.js"></script>
<script type="text/javascript">
  //var Demo=$('#demo');
  //getComputedStyle() IE9之前不支持此方法
  //console.log(getComputedStyle(Demo).width);
  //currentStyle  是一种属性  在谷歌中没有currentStyle这种属性，不支持
  //console.log(Demo.currentStyle.width);//谷歌不支持
  //封装获取某个元素指定css属性值的方法
  //element代表元素   attr代表元素的属性，比如宽高
  function css(element,attr){
  return element.currentStyle?element.currentStyle[attr]:getComputedStyle(element)[attr];
  }


//var w=css(Demo,'width')
//alert(w);
</script>
</html>
lusizhifei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript封装——封装获取元素的函数
wing_annuan的博客
11-26 952
封装获取元素的函数 函数的实参形式 1、#id 通过id名获取元素 2、.class名 通过class名获取元素 3、ele 通过标签名获取元素 <script> function getEle(ele) { //substr（参数1，参数2） //参数1表示开始的索引 //参数2表示截取个数，如果没有参数2表示从开...
原生JS实现获取及修改CSS样式的方法
10-18
值得注意的是，该方法获取的值是只读的，无法直接修改。若要修改样式，可以使用`element.style.cssText`，如： ```javascript div.style.cssText = 'width:300px;'; ``` 三、浏览器兼容性问题 在非IE浏览器中，`...
利用getComputedStyle方法获取元素css的属性值
weixin_30645617的博客
03-18 147
在平时的工作中有时候会碰到需要获取元素当前样式的问题，查了一下可以用getComputedStyle这个方法来获取元素计算后的样式（有些我们在css里面没有写的，浏览器默认的样式也可以获得） getComputedStyle的使用 getComputedStyle接收两个参数，第一个参数是一个元素，第二个参数是一个可选的伪元素。 getComputedStyle方法返回一个包含所有样式的对象...
获取css代码中的某些属性
qq_43477218的博客
07-24 316
获取DOM节点对象的css属性 使用原生JS代码（最原汁原味） 使用原生JS代码获取CSS属性值分为两种：一种用于IE。另一种用于火狐、谷歌等。不得不说现在IE好辣鸡。 **getComputedStyle（obj，“伪类”）[attr]：**此方法是window对象的所以不用DOM节点调用直接写即可。obj是DOM对象（必写），伪类可选写，attr是css元素字符串。用于谷歌、火狐等。 <head> <style> #p{ col
准确获取指定元素CSS属性值
fafa211的专栏
02-09 855
如何实现javascript精确获取元素css属性值？当处理 DOM 元素的 CSS 属性时，我们经常会遇到一个问题：明明页面上已经定义了 CSS 属性值，但在获取的时候却为空，这是因为任何样式表文件或内联 CSS 预设的样式信息并不能可靠地反映到 style 属性上，本文向你介绍准确获取指定元素 CSS 属性值的方法。   以下为引用的内容：　　Javascript:
封装一个函数获取匹配特定的css选择符
weixin_30823001的博客
12-28 37
1 function $$(selector,context){ 2 context=context||document; 3 var elements=context.querySelectorAll(selector); 4 return Array.prototype.slice.call(elements); 5 } 转载于:h...
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
10-28
`attr(name)`用于获取匹配的第一个元素的属性值，`attr(properties)`批量设置多个属性，`attr(key, value)`则是为所有匹配元素设置单个属性值。需要注意的是，当涉及到`class`属性时，应使用`addClass()`和`...
js获取input标签的输入值实现代码
10-27
这里的`getElementById("maintenance_men")`会返回具有指定ID的元素，然后`.value`属性用于获取或设置该元素的当前值，也就是用户在输入框中输入的内容。 在给出的代码片段中，我们看到一个`jsp`页面，它混合了Java...
css3编写浏览器背景渐变背景色的方法
09-24
【CSS3 编写浏览器背景渐变背景色的方法】 在CSS3中，我们可以利用多种方式创建背景色渐变效果，让网页元素的背景颜色平滑过渡。这些方法不仅增加了视觉吸引力，还可以帮助设计师创造出独特的界面风格。下面我们将...
通过ID获取元素
dgf5765的博客
01-20 247
网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。 语法: document.getElementById(“id”) 注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。例如： 运行结果为： 理解：输出为null,是因为代码是...
JavaScript DOM操作案例点击按钮显示大图以及封装通过id获取元素的函数
weixin_30556161的博客
07-19 156
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="b...
简单的获取元素的封装
weixin_30467087的博客
11-15 59
//封装获取元素 /* js的获取元素：ID：document.getElementById(); class:document.getElementsByName()[]; Tag:document.getElementsByTagName()[] 现在我们要简单的封装这个 1：函数写法： function...
封装一个名字为$的函数，用于获取元素
MIng__4791的博客
04-18 1573
封装一个名字为$的函数，用于获取元素，主要能够实现以下功能： 根据id获取元素，如：$(“#container”) 用于获取id名为container的DOM元素。 根据类名获取元素，如：$(“.active”) 用于获取所有class名为active的DOM元素 根据标签名获取元素，如：$(“div”) 用于获取所有标签名为div的DOM元素 根据name属性获取元素，如：$(“name
获取指定元素的某一个样式属性值
weixin_30576859的博客
07-12 166
1、"元素.style.样式属性名" ->oDiv.style.height 弊端:"只能"获取在"行内"上编写过的样式,不管在哪些了对应的样式,只要没有在行内上写过,都获取不到 oDiv.style.height 由于height并没有写在行内样式上(写在样式表里了),所以获取的结果依然是""2、通过 window.getComputedStyle 获取所有经过浏览器计算的样式(只要的你的...
js获取元素的方法和属性
最新发布
suqi_123123的博客
11-19 1312
这些只是 JavaScript 中获取元素的一些基本方法和属性，实际应用中还有更多的操作和技巧。在JavaScript中，获取元素的方法和属性有很多种。
获取当前元素的css属性,获取元素的css属性值
weixin_36301419的博客
08-03 1741
```html判断浏览器是否支持一个方法pre {font-size: 16px;font-weight: 700;position: absolute;left: 10px;}window.getComputedStyle(element, null).left; // 获取element的left样式，谷歌火狐支持。window.getComputedStyle(element, null)[...
jquery获取某个元素的css属性值得方法（笔记）
热门推荐
weixin_42410730的博客
11-13 1万+
$(“p”).css(“background-color”);//获取p元素的背景颜色 $(“p”).css(“background-color”,“yellow”);//设置p元素的背景颜色为黄色
获取元素CSS属性值
VisonYH的博客
01-21 2113
DOMObj.style[attr] 只能获取行内样式，在现代浏览器中，有DOMObj.getComputedStyle 方法可以获得浏览器渲染计算后的属性值。 以下就不同浏览器中进行获取 css 样式进行封装。 //需要规避复合值的问题 margin padding //把带获取到带单位的把单位去掉 px em pt rem deg function ge
原生JS中如何获取CSS属性中的值
mwtopfire的博客
07-25 1万+
css文件中如何得到某个属性值： 一、getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值，返回的是一个CSS样式声明对象 ， 只读， 此方法支持Firefox浏览器; 语法：var style=window。getComputedStyle(“元素”，“伪类”);第一个参数是必须的，第二个为可选的。 二、currentStyle 是一款可以兼容IE浏览器的属
vue 动态设置css样式的值
06-07
具体的做法是在绑定的属性前加上`:style`，然后将样式名和值封装在一个 JavaScript 对象中，最后将该对象作为值绑定到`:style`上即可。例如： ```html , fontSize: textSize + 'px' }"> 这里是动态设置样式的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值