JavaScript如何获取一个元素的样式信息

跨浏览器方法

function getStyle(elem, cssprop, cssprop2){
 if(elem.currentStyle){
  return elem.currentStyle[cssprop]
  }else if(document.defaultView && document.defaultView.getComputedStyle){
  return document.defaultView.getComputedStyle(elem, "").getPropertyValue(cssprop2)
 }else{
  return null
 }
}
<style>
 #elem{font-size:23px;}
</style>
<input id ="elem" style="font-size:18px;"/>
<script>
elem.style.fontSize = '12px';
console.log(getStyle(elem, "fontSize", "font-size"))
// 输出12px
</script>

getStyle取值的优先级是：

1.动态设置的

2.内联设置的

3.样式表设置的

4.浏览器默认设置的

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解JS获取HTML DOM元素的8种方法

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.我们用JavaScript对网页进行的所有操作都是通过DOM进行的. 这篇文章不做深入研究,只把各种用法和坑做一个总结. JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getE

  • JavaScript与JQUERY获取元素的宽、高和位置

    JavaScript与JQUERY获取元素的宽、高和位置

    javascript中 ele.getBoundingClientRect():获取一个元素相对于浏览器视口的的坐标(无论父元素定位与否),返回一个Object对象,该对象有6个属性:top/left/right/bottom/width/height.几乎所有浏览器都支持该方法.jQuery中没有直接的方法,需要用$(ele).offset().top-$(document).scrollTop()计算得到. 注意:right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最

  • js jquery 获取某一元素到浏览器顶端的距离实现方法

    如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ margin: 0; padding: 0; } .mdiv{ width: 100px; height: 100px; background-color: red; } </style> </head> <bod

  • JavaScript中获取HTML元素值的三种方法

    JavaScript中取得元素的方法有三种:分别是: 1.getElementById() 方法:通过id取得HTML元素. 2.getElementsByName()方法:通过name取得元素,是一个数组. 3.getElementsByTagName()方法:通过HTML标签取得元素,是一个数组. 如果要取得值可以使用value,如:var x=document.getElementById("id").value; 方法一:getElementById() 方法 可返回对拥有指定

  • js jquery获取当前元素的兄弟级 上一个 下一个元素

    var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNode;   //得到s的父节点 var ns=s.nextSbiling;   //获得s的下一个兄弟节点 var ps=s.previousSbiling;  //得到s的上一个兄弟节点 var fc=s.firstChild;   //获得s的第一个子节点 var lc=s.lastChile;   //获得s的最后一个子节点 JS获取节点父级,子级元素 先说一下JS的获取方法,其

  • js 获取元素所有兄弟节点的实现方法

    比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色).我想把其他所有li--不包括红的li--的颜色也设为红色,此时,就需要获得红li的所有兄弟节点. 兄弟,就是和你平辈的,既不是上一级也不是下一级,而且可能有比你大的(兄),也可能比你小(弟).兄弟节点同理,下面是一个常规的获取兄弟节点的办法. 代码如下 function siblings(elm) { var a = []; var p = elm.parentNode.children; for(var i

  • js通过classname来获取元素的方法

    原生JS有3种方式来获取元素: getElementById('id') getElementsByName('name') getElementsByTagName('tag') getElementById是获取元素最快的方式,但我们不能给每个HTML元素都加以ID吧,所以我们需要一个很方便的通过className来获取元素 function getElementsByClassName(className,tagName){ var ele=[],all=document.getEleme

  • JavaScript如何获取一个元素的样式信息

    跨浏览器方法 function getStyle(elem, cssprop, cssprop2){ if(elem.currentStyle){ return elem.currentStyle[cssprop] }else if(document.defaultView && document.defaultView.getComputedStyle){ return document.defaultView.getComputedStyle(elem, "").g

  • JavaScript实现获取某个元素相邻兄弟节点的prev与next方法

    本文实例讲述了JavaScript实现获取某个元素相邻兄弟节点的prev与next方法.分享给大家供大家参考,具体如下: /** * 获取相邻元素 * @param ele 参考物元素 * @param type 类型,上一个(1)or下一个(0) * @return 返回查找到的元素Dom对象,无则返回null */ function getNearEle(ele, type) { type = type == 1 ? "previousSibling" : "nextSi

  • 原生javascript实现获取指定元素下所有后代元素的方法

    本文实例讲述了原生javascript实现获取指定元素下所有后代元素的方法,分享给大家供大家参考.具体实现方法如下: 过去常用的循环递归的方式显得非常的麻烦,下面就分享一个比较简单的方式,使用原生的javascript方法即可实现此功能. 代码实例如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author&q

  • javascript实现获取一个日期段内每天不同的价格(计算入住总价格)

    javascript实现获取一个日期段内每天不同的价格(计算入住总价格)

    代码例子 最近在做酒店的小程序项目开发,遇到一个这样的问题. 酒店的房间价格是浮动的,每天每时或某个特殊的日期价格等都是浮动的不一样.如果用户选择了未来5天的住房的话,而这5天刚好价格还都不一样还有特殊日的价格,如何计算出一个5天的总价格呢? 下面的例子是根据入住的日期,和离店的日期来列出这一个日期段内的所有日期: 这个功能你会有几个地方用到,所以要封装下:单独建一个js文件 function Thedatefor(times,objroom){ // 日期段 objroom房间价格表,有星期和

  • javascript 精确获取页面元素的位置

    javascript 精确获取页面元素的位置

    复制代码 代码如下: //取得元素x坐标 function pageX(elem) { return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft; } //取得元素y坐标 function pageY(elem) { return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop; } 貌

  • FF火狐下获取一个元素同类型的相邻元素实现代码

    复制代码 代码如下: // 兼容火狐获取一个节点的相同类型的上一个相邻节点 function perviousSiblingSameType(node , cnode ) { // 为空直接返回null if(node.previousSibling == null ) { return null ; } else { // 节点类型不相等继续递归 if(node.previousSibling.nodeType != cnode.nodeType) { return perviousSibli

  • jquery获取一个元素下面相同子元素的个数代码

    例如下面的html代码,要获取P元素下面a元素的个数: <p id="father"> <a></a> <a></a> <a></a> <a></a> <a></a> -- <a></a> </p> 我们可以这样写: $("#father a").length

  • javascript下判断一个元素是否存在的代码

    1. 判断表单元素是否存在(一) 复制代码 代码如下: if("periodPerMonth" in document.theForm) { return true; } else{ return false; } 2. 判断页面元素是否存在 复制代码 代码如下: if(document.getElementById("XXX")) { //存在 } 3. 判断表单元素是否存在(二) 复制代码 代码如下: if(document.theForm.periodPerM

  • javascript获取元素CSS样式代码示例

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:100px;height:100px;"></div> 内嵌样式即写在style标签中,例如<style type="text/css">div{width:100px; height:100px}</style> 链接式即为用link标签

随机推荐