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.浏览器默认设置的
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
详解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中 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实现获取一个日期段内每天不同的价格(计算入住总价格)
代码例子 最近在做酒店的小程序项目开发,遇到一个这样的问题. 酒店的房间价格是浮动的,每天每时或某个特殊的日期价格等都是浮动的不一样.如果用户选择了未来5天的住房的话,而这5天刚好价格还都不一样还有特殊日的价格,如何计算出一个5天的总价格呢? 下面的例子是根据入住的日期,和离店的日期来列出这一个日期段内的所有日期: 这个功能你会有几个地方用到,所以要封装下:单独建一个js文件 function Thedatefor(times,objroom){ // 日期段 objroom房间价格表,有星期和
-
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标签
随机推荐
- VBS实现截图功能
- BAT 解密工具
- jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
- js form action动态修改方法
- 深入了解php4(1)--回到未来
- 关于数据与后端进行交流匹配(点亮星星)
- 用Python代码来解图片迷宫的方法整理
- JavaScript实现审核流程状态的动态显示进度条
- python自定义解析简单xml格式文件的方法
- css也疯狂! 用background 插入flash播放器
- 牛奶包装带上的秘密—让你知道牛奶真正生产日期
- 用ASP将SQL搜索出来的内容导出为TXT的代码
- tel.xls.vbs xls专杀工具
- awk中让人郁闷的system()函数
- Android网络请求框架Retrofit详解
- 十个习惯让你精通新的开发技术
- 全面解释java中StringBuilder、StringBuffer、String类之间的关系
- Java中使用jaxp进行sax解析_动力节点Java学院整理
- Python自定义简单图轴简单实例
- Mybatis注解实现多数据源读写分离详解