`
taro
  • 浏览: 136655 次
  • 性别: 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代码很傻だけど...

 

分享到:
评论

相关推荐

    unigui_调用外部js与css

    本主题聚焦于如何在Unigui项目中调用外部JavaScript(js)和样式表(css)资源,这对于扩展功能、引入第三方库或者实现自定义样式是必要的。 首先,理解Unigui的基础架构是关键。Unigui基于Vue.js,Vue.js是一个...

    韩顺平《轻松搞定网页设计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教程学习笔记 ...

    从 XSLT 样式表调用 JavaScript

    从XSLT样式表调用JavaScript的知识点解析 在探讨如何从XSLT样式表调用JavaScript时,我们首先需要理解XSLT和JavaScript的基本概念及其在XML文档处理中的作用。XSLT(Extensible Stylesheet Language ...

    前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar

    前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar ...

    jQuery制作控制css样式表切换各个样式表

    假设我们有两份样式表文件,分别为`style1.css`和`style2.css`: ```html <link id="currentStyleSheet" rel="stylesheet" href="style1.css"> ``` 在JavaScript部分,我们可以使用jQuery的`click`事件监听器来...

    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 样式表中文手册**...

    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应用中集成外部样式和脚本,从而提升应用的交互性和用户体验。记得解压文件查看示例代码和详细步骤,这将有助于你更好地...

    css样式表文档

    在Web开发中,CSS(Cascading Style Sheets)样式表是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。CSS能够分离网页的内容与表现,使得开发者可以更方便地控制网页的布局和视觉...

    韩顺平html+css+javascript-----div+css笔记

    CSS是层叠样式表,用于指定DIV中的内容样式。 DIV+CSS的快速体验 ------------------- 以下是一个简单的DIV+CSS示例: ```html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <title>DIV+...

    div+css样式与布局实例

    通过学习和实践这些`div+css`布局与样式实例,你可以构建出美观且功能强大的网页,同时也能更好地应对现代网页设计的挑战。在实际项目中,结合其他前端技术如JavaScript、jQuery和现代框架(如React、Vue、Angular)...

    打分效果(DIV+CSS样式)

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

Global site tag (gtag.js) - Google Analytics