`
accpxudajian
  • 浏览: 458733 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

获取DOM对象的当前(current)样式

阅读更多

 

/**
*获取页面某个元素当前的样式:(譬如获取当前INPUT的宽度,border的样式、border颜色等)
*@param domID 文档对象的ID 或者直接传DOM文档对象
*@param propName  样式属性
*@return 返回当前元素的样式
*注意:propName不要聚合写法(eg:borer),要分拆写法(eg:borderStyle 只支持IE),越详细越好(eg:borderLeftStyle 支持所有浏览器)
*
*/
getStyle = function(domID,propName){
	var dom = null;
	if(typeof(domID)=="object" && !!domID.tagName==true){
		dom = domID;//直接传递文档对象
	}else{
		dom = document.getElementById(domID);//传递文档对象的ID
	}
	if(dom==null){return "";}
	//兼容IE,chrome,FF等浏览器的写法:【 注意属性写法规则:严格要求写全名称,否则失效返回"" 】
	var currentStyle = dom.currentStyle ||document.defaultView.getComputedStyle(dom,null);	
	return currentStyle[propName] ||"";
}

 

 

#测试:

 

 

var id  ="txt_id";//INPUT标签的ID
JSLogger.log("border = "+getStyle(id,"borderLeftWidth"));//all yes
JSLogger.log("border = "+getStyle(id,"borderLeftStyle"));//all yes
JSLogger.log("border = "+getStyle(id,"borderLeftColor"));//all yes
JSLogger.log("border = "+getStyle(id,"width"));//all yes
//IE可以使用下边的写法
JSLogger.logHTML("border = "+getStyle(id,"border"));//【all no 所有浏览器都不支持这种写法】
JSLogger.logHTML("border = "+getStyle(id,"borderStyle"));//only IE yes
JSLogger.logHTML("border = "+getStyle(id,"borderWidth"));//only IE yes
JSLogger.logHTML("border = "+getStyle(id,"borderColor"));//only IE yes
 

 

 

 

 

 

 

 

愤怒的coder - 钓鱼岛是中国的固有领土。

 

分享到:
评论

相关推荐

    .遍历DOM元素

    2. 渲染动画:遍历DOM可以实现复杂的动画效果,比如逐个改变元素样式。 3. 数据绑定:在MVVM框架中,遍历DOM用于将数据绑定到视图。 4. 事件委托:遍历祖先节点以捕获或冒泡事件。 三、遍历技巧与注意事项 1. 避免...

    jQuery实现获取元素索引值index的方法

    首先,我们要了解“.index()”方法的作用,它可以帮助我们获取jQuery对象集合中某个元素的索引位置。这个索引值是从0开始计数的,即第一个元素的索引值为0。这个方法既可以用来获取子元素的索引,也可以用来获取与...

    jquery自定义当前动态时间样式

    2. JavaScript Date对象的使用,用于获取和格式化当前时间。 3. CSS样式设计,实现时间的美化展示。 4. 使用`setInterval`函数实现定时任务,即每秒更新时间。 这个实践项目可以帮助开发者更好地理解和运用jQuery,...

    jquery当前位置路径展示.zip

    综上所述,“jquery当前位置路径展示”项目涉及了jQuery的基本用法,包括DOM操作、获取当前URL以及CSS样式应用。理解这些概念和技术对于任何前端开发者来说都是至关重要的。通过结合jQuery的便利性、CSS的样式控制...

    jQuery与javascript对照学习 获取父子前后元素 实现代码.docx

    在Web前端开发过程中,经常需要对DOM(文档对象模型)进行操作,包括选取元素、修改样式、添加或删除节点等。jQuery作为一种轻量级的JavaScript库,极大地简化了这些操作。本文将详细介绍如何使用jQuery与原生...

    vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法

    对于绑定在元素上的事件处理函数,可以通过参数`$event`获取到事件本身,从而进一步操作DOM元素的class属性。 在HTML部分,可以这样编写代码: ```html v-on:mouseover="changeActive($event)" v-on:mouseout=...

    CLOCK-CURRENT-TIME:此时钟显示当前时间..(JS)

    以上就是实现“CLOCK-CURRENT-TIME”项目的关键点,结合JavaScript的日期处理和DOM操作,以及可能的CSS样式设计,可以创建一个实时显示当前时间并区分AM/PM的时钟组件。通过理解这些概念,你可以进一步定制自己的...

    dateSelector_display_current_date.rar

    "dateSelector_display_current_date.rar"这个压缩包提供的就是一个这样的解决方案,它实现了显示当前日期并允许用户从下拉列表中选择日期的功能。接着,用户的选择将被提交到服务器,服务器端使用PHP脚本语言处理...

    JavaScript 高级教程

    在Web开发领域中,DOM(文档对象模型)是至关重要的一个概念,它为HTML和XML文档提供了一种标准的编程接口,使得开发者可以通过脚本语言来访问、更新文档结构、内容和样式。DOM的核心思想是将整个文档视为一个节点树...

    A samart way to learn javascript

    29. Getting the current date and time(获取当前日期和时间):学习如何在JavaScript中获取系统当前日期和时间。 30. Extracting parts of the date and time(提取日期和时间的部分):从日期对象中提取特定部分...

    jquery 动态显示时间

    创建一个新的Date对象会获取当前系统时间。我们可以使用Date对象的方法如`getFullYear()`、`getMonth()`和`getSeconds()`等来获取年、月、日、小时、分钟和秒。 要实现动态显示时间,我们需要使用JavaScript的...

    javascript技巧

    22. **获取 DOM 元素**:`document.getElementById()` 方法用于根据元素的 ID 获取特定的 DOM 元素。例如: ```javascript let element = document.getElementById("myElement"); ``` 23. **遍历表单元素**:...

    Current-Location-Weather-App:使用openweatherapi的api收集了使用香草javaScript和数据制作的气象应用

    这款应用程序的核心功能是帮助用户获取他们当前位置的天气状况,无需手动输入城市名或地理位置,极大提升了用户体验。 首先,我们要了解Vanilla JavaScript,这是一种不依赖任何JavaScript库或框架的原生JavaScript...

    webBrowser 网页放大缩小

    WebBrowser控件没有内置的缩放功能,但可以通过操作网页的DOM(文档对象模型)来实现。我们可以通过调用`DocumentText`属性获取或设置当前页面的HTML源码,然后修改`<body>`标签中的`style`属性来改变缩放比例。...

    JavaScript日历控件

    总的来说,JavaScript日历控件的实现涉及JavaScript基础、DOM操作、日期处理、CSS样式以及可能的AJAX交互。通过学习和实践这个控件,开发者可以增强自己在前端开发领域的技能,同时提升网页的交互性和用户体验。

    javascript实现的日期日历

    我们可以获取当前月份的天数(通过Date对象的getDate()方法获取)和星期几(getDay()方法),然后根据这些信息构建一个二维数组,每一行代表一周,每个元素代表一天。 ```javascript function createCalendar(month...

    AjaxPage实现分页

    7. JavaScript接收到响应后,解析数据并动态更新DOM(文档对象模型)以展示新页内容。 8. 用户看到分页效果,页面其他部分保持不变。 **二、实现Ajax分页的关键技术** 1. **JavaScript事件监听**:通过...

    javascript经典特效---登陆情况时间显示.rar

    然后,在JavaScript中,我们可以使用`Date`对象来获取当前时间,并通过`setInterval`函数每秒更新一次显示。以下是一个简单的实现: ```javascript // 获取显示时间的元素 var currentTimeElement = document....

    原生JS不依赖其它库分页代码.zip_html_html 模板_jquery_js分页

    2. **DOM操作**:通过`document.getElementById`、`querySelectorAll`等方法获取DOM元素,`innerHTML`、`innerText`属性修改元素内容,`classList.add/remove/toggle`控制类名以改变样式。 3. **计算页码**:根据总...

Global site tag (gtag.js) - Google Analytics