`
BradyZhu
  • 浏览: 248351 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JavaScript获取外部CSS属性方法介绍

 
阅读更多

在HTML代码中,如果对于一个标签,你在其中写上style属性对其进行描述,这样的话,使用JS获取他的属性只需

要div.style.height就可以了。但是对于外部CSS就不能了,下面介绍外部CSS属性获取方法。

CSS如下

#div1{
	width: 500px;
	height: 200px;
	background-color: pink;
}

HTML如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="../css/5.css" type="text/css"></link>
  
  <script type="text/javascript">
  		 function test(){
  		 	var div = document.getElementById("div1");
  		 	window.alert(div.offsetHeight);
  		 	window.alert(div.offsetWidth);
  		 }
  </script>
  </head>
  
  <body>
    <div id="div1">div1</div>
    <input type="button" onclick="test();" value="测试">
  </body>
</html>
其实就是一句话div.offsetHeight这句话。很经典,Mark一下

分享到:
评论

相关推荐

    老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)

    众所周知,CSS样式有三种类型:行内样式、内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 。 一、行内样式获取相对简单,通过element.style.attr(元素.style.属性...

    javascript 获取元素样式必杀技

    Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(&lt;div xss=removed&gt;hello),可以直接使用element.style.color来直接获取css属性的值; 2. 但是对于外部定义的css样式使用...

    JavaScript完全自学宝典 源代码

    6.7.html 各种使用JavaScript获取复选框值的方法。 6.8.html JavaScript控制复选框。 6.9.html 复选框的JavaScript特效。 6.10.html JavaScript取单选框的值。 6.11.html JavaScript控制单选框...

    javaScript 读取和设置文档元素的样式属性

    外部链接样式表文件 JavaScript获取和设置文档元素的css属性: 1.获取元素Style属性里面设置的样式属性, document.getElementById(id).style.height; 有,则返回属性值;没有则返回空 IE和火狐皆然,只是有的属性值...

    JavaScript实战

    5.6.3 一次改变多个CSS属性 145 5.7 读取、设置和删除HTML属性 146 5.8 创意标题 147 5.9 操作选择中的每个元素 149 5.9.1 匿名函数 150 5.9.2 this和$(this) 150 5.10 自动提取引用 152 5.10.1 概览 152 5.10.2 ...

    精通JavaScript

    • 1.3.htm 调用外部JavaScript文件 • 1.3.js 1.3.htm使用的外部JavaScript文件 第2章(\第2章) • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值...

    精通javascript

    • 1.3.htm 调用外部JavaScript文件 • 1.3.js 1.3.htm使用的外部JavaScript文件 第2章(\第2章) • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值...

    HTML+css知识总结(建议收藏)

    一个页面的主要组成由结构(html5)表现(css)行为(JavaScript)组成, 今天学习的是以标签和路径为主的html5的内容。 lang语言:作用于提示浏览器编译 charset字符:用UTF-8为全球通用准没错。 骨架标签:html...

    css-variables-polyfill:CSS变量的基本polyfillcustom-properties

    CSS变量Polyfill CSS变量/自定义属性的基本polyfill 这是对非常基本的 polyfil的尝试。 实际上,这更多是部分polyfill,因为它不会覆盖变量内部的变量,DOM作用域或其他任何“奇特的”东西。 只需获取在CSS中任何...

    HTML5与CSS3基础教程(第8版)高清文字

    5.2 获取图像 99 5.3 选择图像编辑器 100 5.4 保存图像 100 5.5 在页面中插入图像 103 5.6 提供替代文本 105 5.7 指定图像尺寸 106 5.8 在浏览器中改变图像的尺寸 108 5.9 在图像编辑器中改变...

    《javaScrip开发技术大全》源代码

    • sample06.htm 引用外部JavaScript • sample07.htm 在同一个HTML文档中多次引用外部脚本文件 • sample08.htm 使用外部脚本文件和嵌入的JavaScript代码 • sample09.htm 边加载...

    精通JS脚本之ExtJS框架.part2.rar

    1.2.2 链接外部JavaScript文件 1.2.3 注意事项 1.3 基础语法 1.3.1 数据类型 1.3.2 变量与常量 1.3.3 运算符 1.4 流程控制语句 1.4.1 if条件语句 1.4.2 switch条件语句 1.4.3 while循环语句 1.4.4 do ...

    精通JS脚本之ExtJS框架.part1.rar

    1.2.2 链接外部JavaScript文件 1.2.3 注意事项 1.3 基础语法 1.3.1 数据类型 1.3.2 变量与常量 1.3.3 运算符 1.4 流程控制语句 1.4.1 if条件语句 1.4.2 switch条件语句 1.4.3 while循环语句 1.4.4 do ...

    jQuery权威指南-源代码

    3.4.2 外部插入节点方法/64 3.5 复制节点/66 3.6 替换节点/68 3.7 包裹节点/69 3.8 遍历元素/71 3.9 删除元素/73 3.10 综合案例分析—数据删除和图片预览在项目中的应用/75 3.10.1 需求分析/75 3.10.2 效果...

    【卷一/共两卷】AJAX实战pdf高清版90M

    2.3.2 CSS样式属性 2.3.3简单的CSS例子 2.4 用DOM组织视图 2.4.1 使用JavaScript操作DOM 2.4.2 寻找DOM节点 2.4.3 创建DOM节点 2.4.4 为文档增加样式 2.4.5 捷径:使用innerHTML属性 2.5 使用XML技术异步加载数据 ...

    jquery插件使用方法大全

    可以用来添加不向外部公开的方法,或者对jQuery的某些方法进行重新定义以提供新功能,或者提供更好的封装、避免名称空间冲突。当然,也可以用来开发插件,但Resig强烈建议在开发插件之前,先考虑jQuery UI widget...

    java web技术开发大全(最全最新)

    《Java Web开发技术大全:JSP+Servlet+Struts+Hibernate+Spring+Ajax》介绍了Web开发中客户端技术的基础知识,包括JavaScript、CSS、AJAX等,这些技术都是Web应用中常用的客户端技术。 《Java Web开发技术大全:JSP+...

    filmstrip:快速简便的网络动画编辑器

    结合定位和关键帧CSS属性的强大功能,您将可以在站点中随时使用CSS代码。 此外,您可以将导出的动画放置在任何位置,并添加到任何element上。 创建新的关键帧很容易。 只需从一个点拖到另一点即可。 内置 :red_...

Global site tag (gtag.js) - Google Analytics