`
scomouse
  • 浏览: 14814 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

curcss

 
阅读更多

在ie下面有3中获取样式的方法

elem.style

elem.currentStyle

elem.runtimeStyle

elem.stlye

指的是元素上面的样式

<div id="xx"style="height:200px"></div>

xx.style.height就是200px

但是

<style type="text/css">
.test{height:200px}
</style>

<div id="xx"class="text"></div>

是取不到值得

elem.currentStyle

获取元素的当前样式(优先级别高的样式)

<style type="text/css">
.test{height:200px}
</style>

<div id="xx"class="text" style="height:20px"></div>

alert(document.getElementById('xx').currentStyle.height)

elem.runtimeStyle

runtimeStyle简单的说就是你可以对一个节点的样式赋值,他将成为最高优先级的节点样式

当指定了runtimeStyle,那么当前显示的样式以runtimeStyle为准,如果取消了runtimeStyle,那么当前显示样式就恢复到currentStyle的样式

<style type="text/css">
.test{height:200px}
</style>
<s/head>

<body>
<div id='xx' style="height:20px;"></div>
<script type="text/javascript">
window.onload = function(){
var xx = document.getElementById("xx");
//xx.runtimeStyle.color="black";
alert(xx.currentStyle.height);
alert(xx.runtimeStyle.height);
alert(xx.style.height);
xx.runtimeStyle.height="30px";
alert(xx.currentStyle.height);
alert(xx.runtimeStyle.height);
alert(xx.style.height);
}


</script>
</body>

w3c获取样式的方法

document.defaultView.getComputedStyle

一个例子

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>attr</title>
<link href="manage.css" mce_href="manage.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="xx" style="height:20px"></div>

<script type="text/javascript">
/*function swap(elem, options, callback){
var old = {};
// Remember the old values, and insert the new ones
for ( var name in options ) {
old[ name ] = elem.style[ name ];
elem.style[ name ] = options[ name ];
}

callback.call( elem );

// Revert the old values
for ( var name in options )
elem.style[ name ] = old[ name ];
}
function css( elem, name, force, extra ){
if( name == "width" || name == "height" ){
var val,
props = { position: "absolute", visibility: "hidden", display:"block" },
which = name == "width" ? [ "Left", "Right" ] : [ "Top", "Bottom" ];
function getWH() {
val = name == "width" ? elem.offsetWidth : elem.offsetHeight;

if ( extra === "border" )
return;

jQuery.each( which, function() {
if ( !extra )
val -= parseFloat(jQuery.curCSS( elem, "padding" + this, true)) || 0;
if ( extra === "margin" )
val += parseFloat(jQuery.curCSS( elem, "margin" + this, true)) || 0;
else
val -= parseFloat(jQuery.curCSS( elem, "border" + this + "Width", true)) || 0;
});
if ( elem.offsetWidth !== 0 )
getWH();
else
jQuery.swap( elem, props, getWH );

return Math.max(0, Math.round(val));
}
}
return jQuery.curCSS( elem, name, force );
}*/

function curCSS(elem, name, force){
var ret, style = elem.style;

/*if ( name == "opacity" && !jQuery.support.opacity ) {
ret = jQuery.attr( style, "opacity" );

return ret == "" ?
"1" :
ret;
}*/

if ( name.match( /float/i ) )
name = !-[1,]? "cssFloat" : "styleFloat";

//如果在元素的style上 就从style上面取
if ( !force && style && style[ name ] ){
ret = style[ name ];
}else if(document.defaultView.getComputedStyle){
// Only "float" is needed here
if ( name.match( /float/i ) )
name = "float";
//将大写字母转成 一杠加以个小写字母 A ===> -a
name = name.replace( /([A-Z])/g, "-$1" ).toLowerCase();

var computedStyle = document.defaultView.getComputedStyle( elem, null );

if(computedStyle)
ret = computedStyle.getPropertyValue( name );

if ( name == "opacity" && ret == "" )
ret = "1";
}else if ( elem.currentStyle ) {
var camelCase = name.replace(/\-(\w)/g, function(all, letter){
return letter.toUpperCase();
});
ret = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ];
if ( !/^\d+(px)?$/i.test( ret ) && /^\d/.test( ret ) ) {
// Remember the original values
var left = style.left, rsLeft = elem.runtimeStyle.left;
// Put in the new values to get a computed value out
elem.runtimeStyle.left = elem.currentStyle.left;
style.left = ret || 0;
ret = style.pixelLeft + "px";
// Revert the changed values
style.left = left;
elem.runtimeStyle.left = rsLeft;
}
}
return ret;
}

window.onload = function(){
var div = document.getElementById('xx')
alert(curCSS(div,'height'));
alert(curCSS(div,'width'));
}
</script>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

分享到:
评论

相关推荐

    jquery需要的所有js文件

    b=this.parents().filter(function(){return/(relative|absolute|fixed)/.test(a.curCSS(this,"position",1))&&/(auto|scroll)/.test(a.curCSS(this,"overflow",1)+a.curCSS(this,"overflow-y",1)+a.curCSS(this,...

    跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明

    写了这么久 js应用 我居然不知道这两个事件 于是 去google搜索了一番. 才发现这两个事件 是如此的优秀 且好用… 但搜索过程中 发现 好多人 似乎不太明白这两个事件 和mouseover mouseout 真正的区别 和用途.....

    高级色系PPT11.pptx

    高级色系PPT11.pptx

    node-v7.9.0-linux-x86.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    基于tensorflow的的cnn卷积神经网络的图像识别分类

    【作品名称】:基于tensorflow的的cnn卷积神经网络的图像识别分类 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。

    ### 数据分析概念、使用技巧、优缺点的文章

    数据分析是指通过收集、清洗、处理和解释数据,以发现其中的模式、趋势和关联,从而提供决策支持或洞察见解的过程。它在各行各业中都扮演着至关重要的角色,从市场营销到科学研究,从金融领域到医疗保健,都有广泛的应用。

    对微信帐单进行数据分析

    #pip install pandas -i https://mirrors.aliyun.com/pypi/simple #安装pandas处理数据模块 #pip install xlwt -i https://mirrors.aliyun.com/pypi/simple #安装excel模块 #pip install openpyxl #从微信导出对帐帐单 import pandas as pd #引入pandas,重命名为pd,Python3.9.10版本的Pandas无法兼容低版本的xls import numpy as np #导入均值模块 #从第17行读取csv格式的帐单 df = pd.read_csv('微信支付账单(20230101-20230401).csv',header=16) #分析数据 ...... #将分析数据另存为out.xlsx ..... #进行交易进间分析 ...... #统计交易对方 ...... #将结果保存到excel ..... writer.close()

    node-v7.2.0-sunos-x86.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    作业.docx

    作业.docx

    DB23∕T 2540-2019 智慧城市建设项目可行性研究报告.pdf

    DB23∕T 2540-2019 智慧城市建设项目可行性研究报告.pdf

    在CentOS系统上安装Docker 步骤

    附件是在CentOS系统上安装Docker 步骤,仅供交流学习使用,无任何商业目的! 在执行这些步骤之前,请确保你的CentOS系统已经更新到最新,并且你了解Docker容器技术的相关概念。如果你在安装过程中遇到任何问题,可以查看Docker的官方文档或搜索相关的错误信息。

    node-v0.12.3-x64.msi

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    蜂群系统链性态网体系化作战矩阵.txt

    蜂群系统链性态网体系化作战矩阵.txt

    高分毕业设计 基于STM32单片机的智能鱼缸设计源代码+原理图+器件清单+实物焊接效果+项目资料齐全.zip

    【资源概览】 高分毕业设计 基于STM32单片机的智能鱼缸设计源代码+原理图+器件清单+实物焊接效果+项目资料齐全.zip高分毕业设计 基于STM32单片机的智能鱼缸设计源代码+原理图+器件清单+实物焊接效果+项目资料齐全.zip高分毕业设计 基于STM32单片机的智能鱼缸设计源代码+原理图+器件清单+实物焊接效果+项目资料齐全.zip 【资源说明】 高分项目源码:此资源是在校高分项目的完整源代码,经过导师的悉心指导与认可,答辩评审得分高达95分,项目的质量与深度有保障。 测试运行成功:所有的项目代码在上传前都经过了严格的测试,确保在功能上完全符合预期,您可以放心下载并使用。 适用人群广泛:该项目不仅适合计算机相关专业(如电子信息、物联网、通信工程、自动化等)的在校学生和老师,还可以作为毕业设计、课程设计、作业或项目初期立项的演示材料。对于希望进阶学习的小白来说,同样是一个极佳的学习资源。 代码灵活性高:如果您具备一定的编程基础,可以在此代码基础上进行个性化的修改,以实现更多功能。当然,直接用于毕业设计、课程设计或作业也是完全可行的。 欢迎下载,与我一起交流学习,共同进步!

    ### 这是一篇对Qt开发进行了详细概述的文章

    Qt是一套跨平台的C++应用程序开发框架,被广泛应用于开发图形用户界面(GUI)程序、嵌入式系统、移动设备应用等领域。它提供了丰富的类库和工具,使得开发者可以快速构建功能强大、美观易用的应用程序。以下是一个涵盖Qt开发的教程和案例的综合描述。

    高分项目 基于STM32单片机的电子血压计设计源代码+项目资料齐全+教程文档.zip

    【资源概览】 高分项目 基于STM32单片机的电子血压计设计源代码+项目资料齐全+教程文档.zip高分项目 基于STM32单片机的电子血压计设计源代码+项目资料齐全+教程文档.zip高分项目 基于STM32单片机的电子血压计设计源代码+项目资料齐全+教程文档.zip 【资源说明】 高分项目源码:此资源是在校高分项目的完整源代码,经过导师的悉心指导与认可,答辩评审得分高达95分,项目的质量与深度有保障。 测试运行成功:所有的项目代码在上传前都经过了严格的测试,确保在功能上完全符合预期,您可以放心下载并使用。 适用人群广泛:该项目不仅适合计算机相关专业(如电子信息、物联网、通信工程、自动化等)的在校学生和老师,还可以作为毕业设计、课程设计、作业或项目初期立项的演示材料。对于希望进阶学习的小白来说,同样是一个极佳的学习资源。 代码灵活性高:如果您具备一定的编程基础,可以在此代码基础上进行个性化的修改,以实现更多功能。当然,直接用于毕业设计、课程设计或作业也是完全可行的。 欢迎下载,与我一起交流学习,共同进步!

    node-v7.1.0-linux-x86.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    基于深度神经网络的图像分类任务.zip

    基于深度神经网络的图像分类任务.zip

    基于 Flask 发布的深度学习 web 服务.zip

    基于 Flask 发布的深度学习 web 服务.zip

    高分项目 基于STM32F030K6单片机控制各个外设模块的电源控制源代码+项目资料齐全+教程文档.zip

    【资源概览】 高分项目 基于STM32F030K6通过该单片机控制各个外设模块的电源控制源代码+项目资料齐全+教程文档.zip高分项目 基于STM32F030K6通过该单片机控制各个外设模块的电源控制源代码+项目资料齐全+教程文档.zip高分项目 基于STM32F030K6通过该单片机控制各个外设模块的电源控制源代码+项目资料齐全+教程文档.zip 【资源说明】 高分项目源码:此资源是在校高分项目的完整源代码,经过导师的悉心指导与认可,答辩评审得分高达95分,项目的质量与深度有保障。 测试运行成功:所有的项目代码在上传前都经过了严格的测试,确保在功能上完全符合预期,您可以放心下载并使用。 适用人群广泛:该项目不仅适合计算机相关专业(如电子信息、物联网、通信工程、自动化等)的在校学生和老师,还可以作为毕业设计、课程设计、作业或项目初期立项的演示材料。对于希望进阶学习的小白来说,同样是一个极佳的学习资源。 代码灵活性高:如果您具备一定的编程基础,可以在此代码基础上进行个性化的修改,以实现更多功能。当然,直接用于毕业设计、课程设计或作业也是完全可行的。 欢迎下载,与我一起交流学习,共同进步!

Global site tag (gtag.js) - Google Analytics