关于爪哇岛描述语言获取内联样式与嵌入式样式的实例

通过风格属性设置背景图案

！-html-div id=' change '更改颜色/div/* CSS */# change {边框： 1px纯黑；宽度： 200像素；高度： 200像素；文本对齐：中心；线高： 200像素；}//jschange。风格。背景颜色='紫色；

在侧边栏设置一个颜色选择器，将变化的背景颜色设置为选择的颜色，此时颜色选择器的颜色是使用内联样式的方式添加的。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title CSS/title style * { margin : 0；padd : 0；} .包装{宽度： 220像素高度： 200像素；绝对位置：top : 300 pxleft :-172 px；} .开合{高： 45px宽度： 48px背景： URL('开合。png ')无重复；背景尺寸：容器；border: 1px纯灰色；边框-左侧：无；绝对位置：top : 0；右： 0；z-index : 2；} .转换器{高： 150像素宽度： 170像素；绝对位置：top : 0；左： 0；border: 1px纯灰色；文本对齐：中心；填充-top : 8px；} .列表li {显示：块；宽度： 36px高度： 36px向左浮动：保证金-左侧： 9%;利润率-top : 10%；} #更改{ border: 1px纯黑；宽度： 200像素；高度： 200像素；文本对齐：中心；线高： 200像素；}/style/head dydiv class=' wrap ' id=' wrap '！-html-div class=' open-close ' id=' open '/div class=' changer ' span颜色选择器/span ul class=' list ' Li class=' color-orange ' style='底色： orange '/Li Li class='颜色-红色' style='底色：红色'/Li Li class='颜色-蓝色' style='底色：蓝色'/Li Li class='颜色-黑色' style='底色：绿色'/Li Li class='var wrap=document。getelementbyid(' wrap ')；var列表=文档。getelementbyid(' list ')；var变更=文档。getelementbyid(' change ')；var color _ change=文档。getelementsbytagname(' Li ')；change.style.backgroundColor='紫色；打开。onmouseover=function(){ wrap。风格。left=0 ' px};打开。onclick=function(){ wrap。风格。left=-172 ' px '；};for(var I=0；I color _ change . lengthi){ color _ change[I].id=I；颜色变化onclick=function(){ change。风格。背景色=color _ change[this。id]。风格。背景颜色；} }/脚本/正文/html问题：

当颜色选择器的颜色是使用嵌入式或者外部引入的方式添加时，javascript的风格属性无效，获取不到颜色值。

解决方法：

爪哇岛描述语言的风格属性只能获取内联样式，对于外部引入样式和嵌入式样式需要用当前样式属性。但是，当前样式在火狐浏览器和铬下不支持，需要使用如下兼容性代码：

htmlelement。原型。_ _ defineGetter _ _(“currentStyle”，function(){ return this。ownerdocument。defaultview。getcomputed style(this，null)；});DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style * { margin : 0；padd : 0；} .包装{宽度： 220像素高度： 200像素；绝对位置：top : 300 pxleft :-172 px；} .开合{高： 45px宽度： 48px背景： URL('开合。png ')无重复；背景尺寸：容器；border: 1px纯灰色；边框-左侧：无；绝对位置：top : 0；右： 0；z-index : 2；} .转换器{高： 150像素宽度： 170像素；绝对位置：top : 0；左： 0；border: 1px纯灰色；文本对齐：中心；填充-top : 8px；} .列表li {显示：块；宽度： 36px高度： 36px向左浮动：保证金-左侧： 9%;利润率-top : 10%；} .颜色-橙色{背景-颜色：橙色；} .颜色-红色{背景-颜色：红色；} .颜色-蓝色{背景-颜色：蓝色；} .颜色-空白{背景色：黑色；} .颜色-绿色{背景-颜色：绿色；} .颜色-粉色{背景-颜色：粉色；} #更改{ border: 1px纯黑；宽度： 200像素；高度： 200像素；文本对齐：中心；线高： 200像素；}/style/head dydiv class=' wrap ' id=' wrap '！-html-div class=' open-close ' id=' open '/div class=' changer ' span颜色的选择/span ul class=' list ' Li class=' color-orange '/Li Li class=' color-red '/Li Li class=' color-blue '/Li Li class=' color-blank '/Li Li class=' color-green '/Li Li class=' color-pink '/Li/ul/div/div id=' change ' change color/div script html element。原型。_ _ defineGetter _(' currentStyle '，function(){ return this。ownerdocument。defaultview。getcomputedstyle(这});var open=文档。getelementbyid(' open ')；var wrap=文档。getelementbyid(' wrap ')；var列表=文档。getelementbyid(' list ')；var变更=文档。getelementbyid(' change ')；var color _ change=文档。getelementsbytagname(' Li ')；change.style.backgroundColor='紫色；打开。onmouseover=function(){ wrap。风格。left=0 ' px};打开。onclick=function(){ wrap。风格。left=-172 ' px '；};for(var I=0；I color _ change . lengthi){ color _ change[I].id=I；颜色变化onclick=function(){ change。风格。背景色=color _ change[this。id]。当前样式。背景颜色；} }/脚本/正文/html

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。