`
taro
  • 浏览: 136564 次
  • 性别: 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是一个...

    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 ...

    全国计算机类说课大赛一等奖:CSS样式表的使用教学设计.docx

    1. **知识内容** - 本课主要讲解CSS样式表和选择器的概念,以及如何添加外部CSS样式表和修改其属性值。通过理解这些概念,学生能够独立设计和美化网页,同时提升审美和创新能力。 2. **教材处理** - 教师将知识点...

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

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

    JavaScript修改css样式style

    JavaScript 修改 CSS 样式是 Web 开发中常见且重要的技能,尤其在动态更新页面样式时。这篇博文(链接已提供)可能深入探讨了如何利用 JavaScript 操作 DOM 元素的 style 属性来改变 CSS 样式。以下是关于这个主题的...

    Html\CSS+DIV学习笔记(史上最实用的CSS笔记)

    HTML负责创建网页的结构,CSS用来处理页面的样式和布局,而DIV则作为一个容器元素,常用于组织和布局网页内容。以下是对这些知识点的详细说明: 1. **Web标准**:Web标准旨在确保网页的可访问性、可维护性和跨平台...

    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 学习...

    div CSS样式表实现中英文双语切换导航条

    本篇将详细介绍如何使用`div`和CSS样式表来实现这样的功能。 首先,我们需要创建基础的HTML结构。`div`元素在HTML中是一个块级元素,通常用于组合其他元素或作为一个独立的容器。在导航条中,我们可以为每个语言...

    CSS样式表中文手册

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

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

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

    div+css高度自适应

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

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

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

    CSS样式-JavaScript笔记.pdf

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

    js改变css样式

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

    文档库,学习笔记,包括但不限于HTML、CSS、JavaScript.zip

    文档库,学习笔记,包括但不限于HTML、CSS、JavaScript 文档库,学习笔记,包括但不限于HTML、CSS、JavaScript 文档库,学习笔记,包括但不限于HTML、CSS、JavaScript 文档库,学习笔记,包括但不限于HTML、CSS、...

    JS封装DIV圆角Css样式

    JavaScript(JS)虽然主要负责动态交互,但在某些情况下,可以用于辅助实现CSS样式,例如封装DIV圆角样式。本文将深入探讨如何使用JS来封装和应用CSS圆角效果,并通过提供的压缩包文件中的示例进行解析。 首先,让...

    css样式表的学习

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

Global site tag (gtag.js) - Google Analytics