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

javascript学习笔记(2) js调用外部css样式表的style值, 获得一个不能预知高度的DIV的高度

阅读更多

完善上一篇日志中demo的两个不足。 

 

  1. js只能修改html内部的css样式代码;
  2. 隐藏div的高度固定,如果隐藏区域文字变动时,布局变差。

 

1. js调用外部css样式表的style值

css样式表有三种写法:

 

  1. 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。
  2. 内部样式(internal Style Sheet):是写在HTML的 里面的,内部样式只对所在的网页有效。 
  3. 外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 

        在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。 

        解决方案:引入currentStyle,runtimeStyle,getComputedStyle style 标准的样式:

 

 

/*Get css property value from extenal style sheet for IE browser */
if(hid.currentStyle) {
      display = hid.currentStyle['display'];
}
/*Get css property value from extenal style sheet for FireFox, Chrome browser */
else if(window.getComputedStyle) {  
      display = window.getComputedStyle(hid, null)['display'];
}

参考链接:http://apps.hi.baidu.com/share/detail/22727000

 

 

获得一个不能预知高度的DIV的高度

以下完全摘自: 获得一个不能预知高度的DIV的高度

 

  1. 通过元素的clientHeight属性能够得到元素的高度,如:  
  2. var height = element.clientHeight;  
  3.   
  4. 这种做法的局限:  
  5. 1. 如果元素的display属性设置为none, 那么得到的结果为0  
  6. 2. 在safari浏览器中,需要使用:element.offsetHeight得到实际高度,这是safari浏览器的bug  
  7.   
  8. 下面是Prototype提供的方法,能够兼容各种浏览器,同时在元素隐藏的情况下也能正确得到元素尺寸,供参考:  
  9. getDimensions: function(element) {  
  10.     element = $(element);  
  11.     var display = $(element).getStyle('display');  
  12.     if (display != 'none' && display != null// Safari bug  
  13.       return {width: element.offsetWidth, height: element.offsetHeight};  
  14.   
  15.     // All *Width and *Height properties give 0 on elements with display none,  
  16.     // so enable the element temporarily  
  17.     var els = element.style;  
  18.     var originalVisibility = els.visibility;  
  19.     var originalPosition = els.position;  
  20.     var originalDisplay = els.display;  
  21.     els.visibility = 'hidden';  
  22.     els.position = 'absolute';  
  23.     els.display = 'block';  
  24.     var originalWidth = element.clientWidth;  
  25.     var originalHeight = element.clientHeight;  
  26.     els.display = originalDisplay;  
  27.     els.position = originalPosition;  
  28.     els.visibility = originalVisibility;  
  29.     return {width: originalWidth, height: originalHeight};  
  30.   }  

 

 

Prototype提供的方法很聪明,通过

  1.  els.visibility = 'hidden';  
  2.  els.position = 'absolute';  
  3.  els.display = 'block';  

得到了

  1.  display:none

的 width,height。

自己裸奔写js代码很傻だけど...

 

分享到:
评论

相关推荐

    JavaScript修改css样式style动态改变元素样式

    调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById(‘obj’).style.className=”…”的写法是错误的!只能写成:document.getElementById(‘obj’)....

    韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记

    "韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记" 本资源主要讲解了 DIV+CSS 的概念和应用, DIV 是 HTML 文档中用来提供结构和背景的元素,而 CSS 是一种用来表现 HTML 或 XML 等文件式样的...

    unigui_调用外部js与css_左侧导航栏

    在这个主题中,我们将深入探讨如何在Unigui项目中调用外部JavaScript库和CSS样式表,以及如何创建一个功能完备的左侧导航栏。 首先,调用外部JavaScript库是Unigui应用扩展功能的关键步骤。这通常涉及到在HTML页面...

    使用JS+CSS实现DIV层自适应高度和宽度

    在本文中,我们学习了使用JS+CSS来实现DIV层自适应高度和宽度的技术。我们了解了CSS基础知识、JavaScript基础知识、获取浏览器窗口的高度、实现DIV层自适应高度、实现DIV层自适应宽度和监听窗口resize事件等知识点。...

    HTML+CSS+JavaScript教程学习笔记.zip

    HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 ...

    html css js 学习笔记.zip

    html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...

    jsp页面中插入css样式的三种方法总结.docx

    外部样式表是将css代码写入到一个独立的文件中,并通过link标签将其链接到jsp页面中。这种方法的优点是可以将样式统一管理,修改样式只需要修改该文件,所有链接到该文件的jsp页面将自动更新。其缺点是需要额外的...

    CSS样式表中文手册

    **CSS(层叠样式表)**是网页设计中不可或缺的一部分,它用于定义网页内容的外观、布局和结构。本资源包含一系列中文手册,帮助开发者深入理解CSS的核心概念和技巧。 1. **Cascading Style Sheet 样式表中文手册**...

    用js动态改变css样式表.docx

    标题中的“用js动态改变css样式表”是指在网页开发中使用JavaScript来动态修改或切换CSS样式表,从而实现页面样式的实时更新。这一技术在交互式网站设计中非常常见,因为它允许用户根据个人喜好或需求调整页面外观。...

    javascript访问外部css文件

    javascript访问外部css文件的所有方法总结,希望对大家有所帮助

    div+css高度自适应

    2. **CSS概述**:层叠样式表(Cascading Style Sheets, CSS)是一种用来表现HTML或XML等文件样式的计算机语言,可以为网页定义颜色、字体、布局等外观属性。 #### 三、高度自适应原理 要实现`div`的高度自适应,主要...

    2-CSS样式学习笔记【适用于入门级别和进阶级别】.doc

    **CSS样式学习笔记** **一、CSS简介** CSS(Cascading Style Sheets)是一种层叠样式表语言,自1996年起发展至今,已经成为Web设计的标准之一。1998年5月,W3C发布了CSS Level 2规范,为网页设计提供了强大的样式...

    javascript学习笔记讲解版参考.pdf

    JavaScript学习笔记讲解版参考.pdf是一份详尽的教程,涵盖了从基础到进阶的JavaScript知识。这份笔记首先从CSS样式表开始,引导读者理解网页样式的设置与应用。 1. CSS(Cascading Style Sheets)样式表是用于控制...

    网页设计DIV+CSS+javascript

    网页设计是构建互联网内容...通过深入研究这个`DIV+CSS+JavaScript`的首页示例,你不仅可以掌握基础的网页设计技巧,还能了解到现代网页开发的实践方法。不断实践和迭代,你将能够创造出更加精致、功能丰富的网页作品。

    unigui_调用外部js与css (1).rar

    通过这个"unigui_调用外部js与css (1).rar"文件,你可能会学习到如何更高效、更灵活地在Unigui应用中集成外部样式和脚本,从而提升应用的交互性和用户体验。记得解压文件查看示例代码和详细步骤,这将有助于你更好地...

    打分效果(DIV+CSS样式)

    `DIV`(Division)是HTML中的一个容器元素,它主要用于组织和划分页面内容,而`CSS`(Cascading Style Sheets)则是一种样式表语言,用来描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。在这个“打分...

    CSS样式-JavaScript笔记.pdf

    2. 能够使用CSS的扩展选择器选择元素 3. 能够说出盒子模型的属性 4. 能够说出JS中五种数据类型 5. 能够使用JS中常用的运算符 6. 能够使用JS中的流程控制语句 7. 能够在JS中定义命名函数和匿名函数

    js改变css样式

    JavaScript(简称JS)和CSS是Web开发中的两个关键技术,它们分别负责网页的交互逻辑与样式设计。在本文中,我们将深入探讨如何使用JavaScript来动态地改变CSS样式,以实现如标题所示的效果——通过页面JS事件改变...

    css样式表的学习

    在这个“css样式表的学习”主题中,我们将深入探讨CSS的核心概念、语法和应用。 首先,CSS的工作原理是基于层叠,这意味着多个样式规则可以应用于一个元素,而最终效果是由这些规则的优先级决定的。基础的层叠规则...

    DIV 样式 CSS 各种属性 JavaScript 中会用到的CSS

    【标题】:“DIV 样式 CSS 各种属性 JavaScript 中会用到的CSS” 【描述】:“本篇文章将总结在JavaScript编程中常见的CSS属性,尤其是与DIV相关的样式,包括设置高度、宽度、内外边距、定位等,以帮助开发者更好地...

Global site tag (gtag.js) - Google Analytics