- 浏览: 90392 次
- 性别:
- 来自: 武汉
文章分类
最新评论
-
zhaohaolin:
哟,龙哥,你还搞C,好高大上的东西啊
xcode初探 -
robinqu:
又改了一些小错误~
[更新20100922]jQuery Location Select 插件- 地址联动、地理检测 -
robinqu:
kimm 写道这个功能不错,就是应用有点局限,内网就不好用了。 ...
[更新20100922]jQuery Location Select 插件- 地址联动、地理检测 -
robinqu:
更新了⋯⋯把代码重写了一次⋯⋯大家可以实现任何种类的联动,以及 ...
[更新20100922]jQuery Location Select 插件- 地址联动、地理检测 -
robinqu:
truth315 写道不好意思了,compu指的是getAre ...
JavaScript Prototype基础
Scripting Computed Styles
计算样式
引入的样式表和内联的样式表的综合效果才是渲染文档的最总依据。
getComputedStyle() 方法就是得到这个最总效果的计算样式的方法。
第一个参数是元素节点,第二个是css的伪类,例如":before"或":after"之类。在FF下,第二个参数不可以省略,就算你不需要写伪类,你也要传递一个null
该方法的返回值是CSS2Properties对象,它代表了当前请求元素的所有生效的样式。
IE不支持这个方法,但是每个元素都有一个currentStyle属性,它保存了当前元素的所有CSS属性。
以下是一个简单的例子:
但你不要奢望这个方法能得到一些很有用的东西,
当你用这个查询top方法,经常是得到auto,除非你明确指定了top的数值;而在查询fontFamily时,你得到的是CSS的字体列表,而不是当前正在使用的字体……
Scripting CSS Classes
CSS的Class编程
经常要改动Class的值,自然会有一些工具函数。会比直接修改className的效率高:
这个函数可以看到老外写代码是多么严谨~
Scripting Stylesheets
操作样式表
DOM Level 2标准定义了<link>和<script>的disabled属性。当设置为true,那么样式表或脚本就失效了。
the Level 2 DOM also defines a complete API for querying, traversing, and manipulating stylesheets themselves. At the time of this writing, the only browser to support a substantial portion of this standard stylesheet traversal API is Firefox. IE 5 defines a different API, and other browsers have limited (or no) support for working with stylesheets directly.
DOM Level 2也同时定义了如何查询、遍历、修改样式表。当然这些标准没有被很好的支持,只有FF实现了部分功能。IE5则是完全使用自己的API,其他浏览器则更加局限。
The stylesheets that apply to a document are stored in the styleSheets[] array of the document object.
The elements of this array are CSSStyleSheet objects.
A CSSStyleSheet object has a cssRules[] array that contains the rules of the stylesheet:
文档所应用的样式表存数在document.styleSheets[]数组里面。
数组的每个元素是CSSStlyeSheet对象,它拥有cssRules[]数组,包含了具体的样式:
IE不支持cssRules属性,不过也有等价的rules属性。
在W3C标准里,CSSRule对象包含所有CSS规则,包括@import等规则。但是,在IE中CSSRule只包含实际的CSS规则。
selectorText是CSS规则的选择符名称,style属性则返回一个CSS2Properties对象,里面包含了与选择符相关的CSS属性。
在遍历样式表的时候,我们更多的是对规则的文本类容感兴趣;我们可以通过CSS2Properties 对象的cssText属性来取得文本内容。
这里有一段运用上面提到的方法来遍历一个属性的方法:
样式表对象还支持插入insertRule()、deleteRule()删除规则的方法:
IE不支持这两个方法,不过提供insertRule() 和 deleteRule()
Stylesheet utility methods
下面是一个操作样式表的工具函数,很有参考价值
计算样式
引用
the rules of all stylesheets are tested to see which apply to the element, and the styles of those applicable rules are combined with any inline styles for the element. This aggregate style information can then be used to correctly render the element in the browser window.
getComputedStyle()
The first argument to this method is the element whose computed style is desired. The second argument is any CSS pseudoelement, such as ":before" or ":after" whose style is desired.
in the Mozilla and Firefox implementation of this method, the second argument is required and may not be omitted.
The return value of getComputedStyle() is a CSS2Properties object that represents all the styles that apply to the specified element or pseudoelement.
the object returned by getComputedStyle() is read-only.
IE does not support the getComputedStyle() method but provides a simpler alternative: every HTML element has a currentStyle property that holds its computed style.
getComputedStyle()
The first argument to this method is the element whose computed style is desired. The second argument is any CSS pseudoelement, such as ":before" or ":after" whose style is desired.
in the Mozilla and Firefox implementation of this method, the second argument is required and may not be omitted.
The return value of getComputedStyle() is a CSS2Properties object that represents all the styles that apply to the specified element or pseudoelement.
the object returned by getComputedStyle() is read-only.
IE does not support the getComputedStyle() method but provides a simpler alternative: every HTML element has a currentStyle property that holds its computed style.
引入的样式表和内联的样式表的综合效果才是渲染文档的最总依据。
getComputedStyle() 方法就是得到这个最总效果的计算样式的方法。
第一个参数是元素节点,第二个是css的伪类,例如":before"或":after"之类。在FF下,第二个参数不可以省略,就算你不需要写伪类,你也要传递一个null
该方法的返回值是CSS2Properties对象,它代表了当前请求元素的所有生效的样式。
IE不支持这个方法,但是每个元素都有一个currentStyle属性,它保存了当前元素的所有CSS属性。
以下是一个简单的例子:
var p = document.getElementsByTagName("p")[0]; // Get first paragraph of doc var typeface = ""; // We want its typeface if (p.currentStyle) // Try simple IE API first typeface = p.currentStyle.fontFamily; else if (window.getComputedStyle) // Otherwise use W3C API typeface = window.getComputedStyle(p, null).fontFamily;
但你不要奢望这个方法能得到一些很有用的东西,
当你用这个查询top方法,经常是得到auto,除非你明确指定了top的数值;而在查询fontFamily时,你得到的是CSS的字体列表,而不是当前正在使用的字体……
Scripting CSS Classes
CSS的Class编程
经常要改动Class的值,自然会有一些工具函数。会比直接修改className的效率高:
这个函数可以看到老外写代码是多么严谨~
/** * CSSClass.js: utilities for manipulating the CSS class of an HTML element. * * This module defines a single global symbol named CSSClass. This object * contains utility functions for working with the class attribute (className * property) of HTML elements. All functions take two arguments: the element * e being tested or manipulated and the CSS class c that is to be tested, * added, or removed. If element e is a string, it is taken as an element * id and passed to document.getElementById(). */ var CSSClass = {}; // Create our namespace object // Return true if element e is a member of the class c; false otherwise CSSClass.is = function(e, c) { if (typeof e == "string") e = document.getElementById(e); // element id // Before doing a regexp search, optimize for a couple of common cases. var classes = e.className; if (!classes) return false; // Not a member of any classes if (classes == c) return true; // Member of just this one class // Otherwise, use a regular expression to search for c as a word by itself // \b in a regular expression requires a match at a word boundary. return e.className.search("\\b" + c + "\\b") != -1; }; // Add class c to the className of element e if it is not already there. CSSClass.add = function(e, c) { if (typeof e == "string") e = document.getElementById(e); // element id if (CSSClass.is(e, c)) return; // If already a member, do nothing if (e.className) c = " " + c; // Whitespace separator, if needed e.className += c; // Append the new class to the end }; // Remove all occurrences (if any) of class c from the className of element e CSSClass.remove = function(e, c) { if (typeof e == "string") e = document.getElementById(e); // element id // Search the className for all occurrences of c and replace with "". // \s* matches any number of whitespace characters. // "g" makes the regular expression match any number of occurrences e.className = e.className.replace(new RegExp("\\b"+ c+"\\b\\s*", "g"), ""); };
Scripting Stylesheets
操作样式表
引用
The HTML DOM Level 2 standard defines a disabled property for both <link> and <script> elements. As its name implies, if the disabled property is TRue, the stylesheet related to the <link> or <style> element is disabled and ignored by the browser
DOM Level 2标准定义了<link>和<script>的disabled属性。当设置为true,那么样式表或脚本就失效了。
引用
the Level 2 DOM also defines a complete API for querying, traversing, and manipulating stylesheets themselves. At the time of this writing, the only browser to support a substantial portion of this standard stylesheet traversal API is Firefox. IE 5 defines a different API, and other browsers have limited (or no) support for working with stylesheets directly.
DOM Level 2也同时定义了如何查询、遍历、修改样式表。当然这些标准没有被很好的支持,只有FF实现了部分功能。IE5则是完全使用自己的API,其他浏览器则更加局限。
引用
The stylesheets that apply to a document are stored in the styleSheets[] array of the document object.
The elements of this array are CSSStyleSheet objects.
A CSSStyleSheet object has a cssRules[] array that contains the rules of the stylesheet:
文档所应用的样式表存数在document.styleSheets[]数组里面。
数组的每个元素是CSSStlyeSheet对象,它拥有cssRules[]数组,包含了具体的样式:
var firstRule = document.styleSheets[0].cssRules[0];
引用
IE does not support the cssRules property but does have an equivalent rules property.
In the W3C standards, a CSSRule object may represent any kind of CSS rule, including at-rules such as @import and @page directives.
In IE, however, the CSSRule object represents only the actual style rules of the stylesheet.
selectorText is the CSS selector for the rule, and style refers to a CSS2Properties object that describes the styles associated with that selector.
In the W3C standards, a CSSRule object may represent any kind of CSS rule, including at-rules such as @import and @page directives.
In IE, however, the CSSRule object represents only the actual style rules of the stylesheet.
selectorText is the CSS selector for the rule, and style refers to a CSS2Properties object that describes the styles associated with that selector.
IE不支持cssRules属性,不过也有等价的rules属性。
在W3C标准里,CSSRule对象包含所有CSS规则,包括@import等规则。但是,在IE中CSSRule只包含实际的CSS规则。
selectorText是CSS规则的选择符名称,style属性则返回一个CSS2Properties对象,里面包含了与选择符相关的CSS属性。
引用
Often, when traversing a stylesheet, you are interested in the text of the rule rather than a parsed representation of the rule. In this case, use the cssText property of the CSS2Properties object to obtain the text representation of the rules.
The W3C CSSStyleSheet interface defines insertRule() and deleteRule() methods for adding and removing rules:
The W3C CSSStyleSheet interface defines insertRule() and deleteRule() methods for adding and removing rules:
在遍历样式表的时候,我们更多的是对规则的文本类容感兴趣;我们可以通过CSS2Properties 对象的cssText属性来取得文本内容。
这里有一段运用上面提到的方法来遍历一个属性的方法:
// Get the first stylesheet of the document var ss = document.styleSheets[0]; // Get the rules array using W3C or IE API var rules = ss.cssRules?ss.cssRules:ss.rules; // Iterate through those rules for(var i = 0; i < rules.length; i++) { var rule = rules[i]; // Skip @import and other nonstyle rules if (!rule.selectorText) continue; // This is the text form of the rule var ruleText = rule.selectorText + " { " + rule.style.cssText + " }"; // If the rule specifies a margin, assume it is in pixels and double it var margin = parseInt(rule.style.margin); if (margin) rule.style.margin = (margin*2) + "px"; }
引用
IE does not support insertRule() and deleteRule() but defines largely equivalent addRule() and removeRule() functions. The only real difference (aside from the different names) is that addRule() expects the selector text and styles text as two separate arguments.
样式表对象还支持插入insertRule()、deleteRule()删除规则的方法:
IE不支持这两个方法,不过提供insertRule() 和 deleteRule()
document.styleSheets[0].insertRule("H1 { text-weight: bold; }", 0);
Stylesheet utility methods
下面是一个操作样式表的工具函数,很有参考价值
/** * Stylesheet.js: utility methods for scripting CSS stylesheets. * * This module defines a Stylesheet class that is a simple wrapper * around an element of the document.styleSheets[] array. It defines useful * cross-platform methods for querying and modifying the stylesheet. **/ // Construct a new Stylesheet object that wraps the specified CSSStylesheet. // If ss is a number, look up the stylesheet in the styleSheet[] array. function Stylesheet(ss) { if (typeof ss == "number") ss = document.styleSheets[ss]; this.ss = ss; } // Return the rules array for this stylesheet. Stylesheet.prototype.getRules = function() { // Use the W3C property if defined; otherwise use the IE property return this.ss.cssRules?this.ss.cssRules:this.ss.rules; } // Return a rule of the stylesheet. If s is a number, we return the rule // at that index. Otherwise, we assume s is a selector and look for a rule // that matches that selector. Stylesheet.prototype.getRule = function(s) { var rules = this.getRules(); if (!rules) return null; if (typeof s == "number") return rules[s]; // Assume s is a selector // Loop backward through the rules so that if there is more than one // rule that matches s, we find the one with the highest precedence. s = s.toLowerCase(); for(var i = rules.length-1; i >= 0; i--) { if (rules[i].selectorText.toLowerCase() == s) return rules[i]; } return null; }; // Return the CSS2Properties object for the specified rule. // Rules can be specified by number or by selector. Stylesheet.prototype.getStyles = function(s) { var rule = this.getRule(s); if (rule && rule.style) return rule.style; else return null; }; // Return the style text for the specified rule. Stylesheet.prototype.getStyleText = function(s) { var rule = this.getRule(s); if (rule && rule.style && rule.style.cssText) return rule.style.cssText; else return ""; }; // Insert a rule into the stylesheet. // The rule consists of the specified selector and style strings. // It is inserted at index n. If n is omitted, it is appended to the end. Stylesheet.prototype.insertRule = function(selector, styles, n) { if (n == undefined) { var rules = this.getRules(); n = rules.length; } if (this.ss.insertRule) // Try the W3C API first this.ss.insertRule(selector + "{" + styles + "}", n); else if (this.ss.addRule) // Otherwise use the IE API this.ss.addRule(selector, styles, n); }; // Remove the rule from the specified position in the stylesheet. // If s is a number, delete the rule at that position. // If s is a string, delete the rule with that selector. // If n is not specified, delete the last rule in the stylesheet. Stylesheet.prototype.deleteRule = function(s) { // If s is undefined, make it the index of the last rule if (s == undefined) { var rules = this.getRules(); s = rules.length-1; } // If s is not a number, look for a matching rule and get its index. if (typeof s != "number") { s = s.toLowerCase(); // convert to lowercase var rules = this.getRules(); for(var i = rules.length-1; i >= 0; i--) { if (rules[i].selectorText.toLowerCase() == s) { s = i; // Remember the index of the rule to delete break; // And stop searching } } // If we didn't find a match, just give up. if (i == -1) return; } // At this point, s will be a number. // Try the W3C API first, then try the IE API if (this.ss.deleteRule) this.ss.deleteRule(s); else if (this.ss.removeRule) this.ss.removeRule(s); };
发表评论
-
WebApp在移动端的涅盘- 另类的移动端应用程序开发
2010-09-27 22:35 4517同时欢迎到我的BLOG讨 ... -
ScriptDoc的Notation规则
2010-01-23 19:37 1789这个还是蛮重要的,以前就一直很羡慕Java有一套标准来着: 转 ... -
关于google.setOnLoadCallback()的一点研究
2010-01-12 10:01 6154google.setOnLoadCallback()是goog ... -
ECMA 推出 JavaScript 5
2009-12-28 21:17 1648转发自http://www.comsharp.co ... -
Javascript 事件编程 (二)
2009-09-18 21:28 1640Event Handlers and the this Key ... -
Javascript 事件编程 (一)
2009-09-04 15:27 1272Events and Event Handling 事件和事件 ... -
Javascript CSS编程 (一)元素定位、透明、内联样式
2009-09-03 14:29 2083Querying Element Position and S ... -
Javascript DHTML动画
2009-09-03 13:00 1240JS实现的动画效果多半 ... -
Javascript IE4 DOM
2009-09-02 17:14 1029很多IE独有的DOM特性是沿袭自IE4的,所以有必要看看IE4 ... -
Javascript 操控选择文本
2009-09-02 17:02 1280Querying Selected Text 查询选择的文本 ... -
Javascript 寻找文档元素
2009-09-02 16:51 2336Finding Elements in a Document ... -
Javascript 窗口的几何关系和相关方法、属性
2009-09-02 10:47 1142Window Geometry 窗口几何关系 引用Scree ... -
JavaScript window下面的常用函数、属性
2009-09-02 10:30 1216我们常用的一些函数都是全局对象window下面的。这里将其梳理 ... -
JavaScript 在浏览器中的相关概念:执行环境、引入脚本、安全策略等
2009-09-02 09:32 1389The Window as Global Execution ... -
JavaScript Namespace模拟
2009-07-15 18:53 1576做JavaScript的大型项目比较痛苦,它没有namespa ... -
JavaScript Class模拟深入 - Duck Typing 和 Class相关的工具类
2009-07-15 17:16 1797Duck Typing 引用If it implements ... -
JavaScript 判定对象类型
2009-07-15 16:53 1386判定JS的对象类型基本 ... -
JavaScript Class模拟深入 - 继承、子类
2009-07-15 16:27 1735Superclasses and Subclasses ... -
javascript this 关键字小提示
2009-07-14 22:01 1194来自:http://www.macji.com/2009/01 ... -
JavaScript Class模拟基础
2009-07-14 16:39 1149Simulating Classes in JavaScrip ...
相关推荐
在Vue.js框架中,改变元素样式的操作是前端开发中常见的需求,Vue为此提供了灵活的方式来通过绑定class或style来控制元素的样式。本知识点将详细介绍如何在Vue中使用class或style来动态改变元素的样式,并通过实例...
- **JavaScript修改样式**:JavaScript可以直接操作DOM,改变元素的样式,如例子中的`document.getElementByClassName("mar_b_10").style.margin-bottom="10px";`,这种方式创建的样式优先级较高。 - **浏览器兼容性...
Vue.js 是一款流行的前端JavaScript框架,它允许开发者创建可复用和可维护的组件,而动态样式是Vue中实现灵活性和交互性的重要特性之一。在Vue中,我们可以使用`v-bind`指令或其简写`:`来动态地绑定元素的样式,这极...
2. 计算样式(Computed Styles): 当需要获取元素的实际应用样式,包括外部样式表和继承的样式时,IE提供了`currentStyle`属性,如`element.currentStyle.backgroundColor`;而Firefox则使用`getComputedStyle`方法...
在实际开发中,除了使用`style`属性外,还可以考虑使用`classList.add`和`classList.remove`来添加或移除类名,这样可以在CSS中定义样式,保持JavaScript和CSS的分离,提高代码可维护性。同时,利用CSS预处理器如...
在使用Vue.js进行Web开发时,经常会遇到需要动态地修改HTML元素的class和style以响应数据变化的情况。Vue.js提供了v-bind指令来实现数据绑定,特别地,当绑定的属性为class和style时,Vue.js对v-bind进行了增强,...
在实际项目中,我们可能会遇到需要处理更复杂的样式逻辑,如动态类(`:class`)或者处理CSS变量。动态类允许我们根据条件切换不同的CSS类,例如: ```html <div :class="{ active: isActive }"> ``` 在这里,`is...
3. **CSS信息**:Element Utils-crx可能还提供查看和复制元素的计算样式(computed styles)的能力,这对于调试和学习CSS非常重要。用户可以直观地看到元素在当前状态下的所有样式属性和值。 4. **HTML源码**:用户...
本文将重点探讨Vue中的两个核心特性:计算属性(Computed Properties)以及如何在模板中绑定类(Class)和样式(Style)。这些特性极大地提升了Vue应用的可维护性和表现力。 ### Vue计算属性 计算属性是Vue中用于...
ag-Grid是一款强大的数据网格组件,它提供了丰富的功能来展示、编辑和操作表格数据。Vue.js则是一个轻量级但功能强大的前端框架,用于构建用户界面。将ag-Grid与Vue结合,可以创建出高性能的数据驱动应用。"ag-grid-...
- `styles.css`: 共享样式,可能用于全局样式或组件的基础样式。 - `package.json`: 项目配置,包含了依赖管理和脚本命令。 通过这个模板,你可以快速启动一个基于ES6的Web Components项目。每个自定义组件文件(如...
import 'iview/dist/styles/iview.css'; import 'muse-ui/dist/muse-ui.css'; // ... ``` 4. **处理图片路径**:当涉及到图片的相对路径时,需要特别注意。在`config/index.js`的`build.assetsPublicPath`字段...
/* Other styles for shortcut items */ } ``` 为了实现右侧快速入口的功能,你需要监听滚动事件,获取当前可视区域内的歌手名字的第一个字符,然后更新快速入口显示的字母。你可以使用`better-scroll`等库提供的...