W3C DOM2样式法则

CSSStyleSheet对象  
CSSStyleSheet对象表示的是具有CSS样式表,包蕴外界样式表和利用<style
type=”text/css”></style>标签钦命的嵌入式样式表。
CSSStyleSheet同样营造于任何的DOM2 CSS目的基础之
上,而CSSStyleRule对象表示的则样式表中的每条准则。
  通过document.stylesheets属性能够赢得文书档案中CSSStyleSheet对象的列表,当中各样对象有下列属性
  type        始终为text/css
  disabled      相应样式表是应于还是禁止使用于前段时间文书档案
  href        样式表绝对于当下文书档案的URAV4L
  title        分组样式标签
  media       样式应用的对象设备项目(screen、print)
  ownerRule    
只读CSSRule对象,若样式用@import导入,表示其父准绳
  cssRules
     只读cssRuleList列表对象,包蕴样式表中全体CSSRule对象
  ==========================================================
  insertRule(rule,index)    增多新的样式注明
  deleteRule(index)      从体制表中移除法则
CSSStyleRule对象
  每一个CSSStyleSheet对象内部含有着一组CSSStyleRule对象。那几个目的分别对应着就如下边那样一条准则:
  boyd{
    font:lucida,verdana,sans-serif;
    background:#c7600f;
    color:#1a3800;
  }
CSSStyleRule对象具有下列属性:   type        传承自CSSRule对象的四个属性,以0~6中的二个数字代表法规类型
  cssText       以字符串方式表示的眼下气象下的全体条条框框
  parentStyleSheet   引用父CSSStyleRule对象
  parentRule     
如若法规位于另一条条框框中,该属性引用另三个CSSRule对象
  selectorText     包蕴法则的采纳符
  style        与HTMLElement.style相似,是CSSStyleDeclaration对象的三个实例
CSSStyleDeclaration对象
  代表三个要素的style属性,与CSSStyleRule对象类似,CSSStyleDeclaration具备下边属性:
  cssText    以字符串情势表示的满贯条条框框
  parentRule   将引用CSSStyleRule对象
  ==========================================================
  getPropertyValue(propertyName)      CSS样式属性值
  removeProperty(propertyName)       从申明中移除属性
  setProperty(propertyName,value,priority)   设置CSS属性值

为啥不用textarea呢?

  1. 如果 select 元素下的有着 option 成分均未有一点名 selected
    属性,会暗中认可选中率先个。
  2. 能够经过 select.selectedIndex 获取到当选的 option 成分的目录。
  3. 澳门微尼斯人手机版,能够因而 select.options[select.selectedIndex] 获取到当选的 option
    成分。
  4. option 成分 <option selected=”selected”
    value=”value3″>text3</option>,能够透过 option.value 获得option 成分的 value 属性值,即 value3;能够因此 option.text 获得option 成分内的文件,即 text3。
  5. 万一 option 元素未有定义 value 属性,则 IE 中 option.value
    无法获取,但 Safari、Opera、FireFox 还能经过 option.value
    获得,值同于 option.text 。
  6. 能够经过 option.attributes.value &&
    option.attributes.value.specified 来判断 option 成分是或不是定义了 value
    属性。

把体制置于DOM脚本之外

style属性
  style属性本人是贰个表示一定成分的富有分歧CSS样式的CSSStyleDeclaration对象,通过style属性只可以访谈到在要素的style属性中以松开药格局宣示的CSS属性。换句话说,通过style属性不可能访谈到由多种样式表层叠而来或许从父成分承继的CSS属性。

复制代码 代码如下:

element.style.backgroundColor =
‘red’;  //background-color被撤换为大小写形式,必需的
//设置id为”example”的元素的体制
setStyleById(‘example’,{
  ’background-color’   :   ’red’,
  ’border’       :  ’1px solid black’,
  ’padding’       :  ’1px’,
  ’margin’       :  ’1px’
});
function setStyle(elementid,styles){ 
  var element = document.getElementById(elementid);
  //循环遍历styles对象并选取各个属性
  for(property in styles){
    //非styles直接定义的质量
    if(!styles.hasOwnProperty(property)) continue;
    
    if(element.style.setProperty){
      element.style.setProperty(uncamlize(property, ‘-‘),
styles[property], null);
    } else {
      element.style[camelize(property)] = styles[property];
    }
  }
  
  return true;
}
//将word-word转换为wordWord
function camelize(s) {
return s.replace(/-(\w)/g, function(math,p1){
return p1.toUpperCase();
});
}
//将wordWord转换为word-word
function uncamelize(s, sep) {
sep = sep || ‘-‘;
return s.replace(/([a-z])([A-Z])/g, function (match, p1, p2){
return p1 + sep + p2.toLowerCase();
});
}
//基于className切换样式
element.className += ‘newclass’;

寻访总结样式
  在修改八个因素的表现此前,你可能希望首先分明它近年来的体制属性,由于元素的style属性只适用于以嵌入式方式定义的体裁,因而不可能透过style获得计量样式,DOM2规范在document.defaultView中蕴藏一个称呼getComputedStyle()的点子,该方式重临贰个只读的CSSStyleDeclaration对象,包括特定成分的保有总结样式,如下:

复制代码 代码如下:

  var styles = document.defaultView.getComputedStyle(element);
  var color = styles.getProperty(‘background-color’);

唯独Microsoft有谈得来的性质element.currentStyle版本

复制代码 代码如下:

//获得一成分的计量样式
function getStyle(element,property) {
  var value = element.style[camelize(property)];
  if(!value) {
    if(document.defaultView &&
document.defaultView.getComputedStyle) {
      value =
document.defaultView.getComputedStyle(element).getPropertyValue(property);
    } else if(element.currentStyle) {
      value = element.currentStyle[camelize(property)];
     }
  }
  return value;
}

1 未曾高亮

故,得到当前 select 成分值的本子如下:

DOM2样式准绳

CSSStyleSheet对象
CSSStyleSheet对象表示的是具备CSS样式表,满含外界样式表和使用…

2 tab键无法选取。——按tab键会切换来下个控件

复制代码 代码如下:

3
未有代码格式化。——因为习于旧贯了Eclipse的条件,能够应用ctrl+shift+F来代码进行格式化。

var getSelectValue = funtion(select) {
var idx = select.selectedIndex,
option,
value;
if (idx > -1) {
option = select.options[idx];
value = option.attributes.value;
return (value && value.specified) ? option.value : option.text);
}
return null;
}

自然,笔者还没强大到本人达成的程度,况兼用脚趾头都能想到断定有人达成了,就看找不找得着。

select 成分 下的具有 option 成分均未有一些名
selected 属性,会暗中认可选中率先个。 能够通过 select.selectedIndex
获取到当选的 option 成分的索引…

通过了劳苦的物色,终于在SourceForge上找到三个叫EditArea的品种,以为蛮好。

它的sample也很掌握

在网页上用以下措施协会

发表评论

电子邮件地址不会被公开。 必填项已用*标注