DOM フェッチのシンプルさ:
console.log(document.getElementById('textBox1').style);
開発者ツールをチェックして、すべてのオブジェクトのプロパティを確認してください。必要に応じてそれらをループできます。
私のdivの結果:
CSSStyleDeclaration
0: "color"
alignmentBaseline: ""
background: ""
backgroundAttachment: ""
backgroundClip: ""
backgroundColor: ""
backgroundImage: ""
backgroundOrigin: ""
backgroundPosition: ""
backgroundPositionX: ""
backgroundPositionY: ""
backgroundRepeat: ""
backgroundRepeatX: ""
backgroundRepeatY: ""
backgroundSize: ""
baselineShift: ""
border: ""
borderBottom: ""
borderBottomColor: ""
borderBottomLeftRadius: ""
borderBottomRightRadius: ""
borderBottomStyle: ""
borderBottomWidth: ""
borderCollapse: ""
borderColor: ""
borderImage: ""
borderImageOutset: ""
borderImageRepeat: ""
borderImageSlice: ""
borderImageSource: ""
borderImageWidth: ""
borderLeft: ""
borderLeftColor: ""
borderLeftStyle: ""
borderLeftWidth: ""
borderRadius: ""
borderRight: ""
borderRightColor: ""
borderRightStyle: ""
borderRightWidth: ""
borderSpacing: ""
borderStyle: ""
borderTop: ""
borderTopColor: ""
borderTopLeftRadius: ""
borderTopRightRadius: ""
borderTopStyle: ""
borderTopWidth: ""
borderWidth: ""
bottom: ""
boxShadow: ""
boxSizing: ""
captionSide: ""
clear: ""
clip: ""
clipPath: ""
clipRule: ""
color: "rgb(255, 255, 255)"
colorInterpolation: ""
colorInterpolationFilters: ""
colorProfile: ""
colorRendering: ""
constructor: CSSStyleDeclarationConstructor
content: ""
counterIncrement: ""
counterReset: ""
cssText: "color: rgb(255, 255, 255); "
cursor: ""
direction: ""
display: ""
dominantBaseline: ""
emptyCells: ""
enableBackground: ""
fill: ""
fillOpacity: ""
fillRule: ""
filter: ""
float: ""
floodColor: ""
floodOpacity: ""
font: ""
fontFamily: ""
fontSize: ""
fontStretch: ""
fontStyle: ""
fontVariant: ""
fontWeight: ""
glyphOrientationHorizontal: ""
glyphOrientationVertical: ""
height: ""
imageRendering: ""
kerning: ""
left: ""
length: 1
letterSpacing: ""
lightingColor: ""
lineHeight: ""
listStyle: ""
listStyleImage: ""
listStylePosition: ""
listStyleType: ""
margin: ""
marginBottom: ""
marginLeft: ""
marginRight: ""
marginTop: ""
marker: ""
markerEnd: ""
markerMid: ""
markerStart: ""
mask: ""
maxHeight: ""
maxWidth: ""
minHeight: ""
minWidth: ""
opacity: ""
orphans: ""
outline: ""
outlineColor: ""
outlineOffset: ""
outlineStyle: ""
outlineWidth: ""
overflow: ""
overflowX: ""
overflowY: ""
padding: ""
paddingBottom: ""
paddingLeft: ""
paddingRight: ""
paddingTop: ""
page: ""
pageBreakAfter: ""
pageBreakBefore: ""
pageBreakInside: ""
parentRule: null
pointerEvents: ""
position: ""
quotes: ""
resize: ""
right: ""
shapeRendering: ""
size: ""
speak: ""
src: ""
stopColor: ""
stopOpacity: ""
stroke: ""
strokeDasharray: ""
strokeDashoffset: ""
strokeLinecap: ""
strokeLinejoin: ""
strokeMiterlimit: ""
strokeOpacity: ""
strokeWidth: ""
tableLayout: ""
textAlign: ""
textAnchor: ""
textDecoration: ""
textIndent: ""
textLineThrough: ""
textLineThroughColor: ""
textLineThroughMode: ""
textLineThroughStyle: ""
textLineThroughWidth: ""
textOverflow: ""
textOverline: ""
textOverlineColor: ""
textOverlineMode: ""
textOverlineStyle: ""
textOverlineWidth: ""
textRendering: ""
textShadow: ""
textTransform: ""
textUnderline: ""
textUnderlineColor: ""
textUnderlineMode: ""
textUnderlineStyle: ""
textUnderlineWidth: ""
top: ""
unicodeBidi: ""
unicodeRange: ""
vectorEffect: ""
verticalAlign: ""
visibility: ""
webkitAnimation: ""
webkitAnimationDelay: ""
webkitAnimationDirection: ""
webkitAnimationDuration: ""
webkitAnimationFillMode: ""
webkitAnimationIterationCount: ""
webkitAnimationName: ""
webkitAnimationPlayState: ""
webkitAnimationTimingFunction: ""
webkitAppearance: ""
webkitAspectRatio: ""
webkitBackfaceVisibility: ""
webkitBackgroundClip: ""
webkitBackgroundComposite: ""
webkitBackgroundOrigin: ""
webkitBackgroundSize: ""
webkitBorderAfter: ""
webkitBorderAfterColor: ""
webkitBorderAfterStyle: ""
webkitBorderAfterWidth: ""
webkitBorderBefore: ""
webkitBorderBeforeColor: ""
webkitBorderBeforeStyle: ""
webkitBorderBeforeWidth: ""
webkitBorderEnd: ""
webkitBorderEndColor: ""
webkitBorderEndStyle: ""
webkitBorderEndWidth: ""
webkitBorderFit: ""
webkitBorderHorizontalSpacing: ""
webkitBorderImage: ""
webkitBorderRadius: ""
webkitBorderStart: ""
webkitBorderStartColor: ""
webkitBorderStartStyle: ""
webkitBorderStartWidth: ""
webkitBorderVerticalSpacing: ""
webkitBoxAlign: ""
webkitBoxDirection: ""
webkitBoxFlex: ""
webkitBoxFlexGroup: ""
webkitBoxLines: ""
webkitBoxOrdinalGroup: ""
webkitBoxOrient: ""
webkitBoxPack: ""
webkitBoxReflect: ""
webkitBoxShadow: ""
webkitColorCorrection: ""
webkitColumnAxis: ""
webkitColumnBreakAfter: ""
webkitColumnBreakBefore: ""
webkitColumnBreakInside: ""
webkitColumnCount: ""
webkitColumnGap: ""
webkitColumnRule: ""
webkitColumnRuleColor: ""
webkitColumnRuleStyle: ""
webkitColumnRuleWidth: ""
webkitColumnSpan: ""
webkitColumnWidth: ""
webkitColumns: ""
webkitDashboardRegion: ""
webkitFilter: ""
webkitFontFeatureSettings: ""
webkitFontKerning: ""
webkitFontSizeDelta: ""
webkitFontSmoothing: ""
webkitFontVariantLigatures: ""
webkitGridColumn: ""
webkitGridColumns: ""
webkitGridRow: ""
webkitGridRows: ""
webkitHighlight: ""
webkitHyphenateCharacter: ""
webkitHyphenateLimitAfter: ""
webkitHyphenateLimitBefore: ""
webkitHyphenateLimitLines: ""
webkitHyphens: ""
webkitLineAlign: ""
webkitLineBoxContain: ""
webkitLineBreak: ""
webkitLineClamp: ""
webkitLineGrid: ""
webkitLineSnap: ""
webkitLocale: ""
webkitLogicalHeight: ""
webkitLogicalWidth: ""
webkitMarginAfter: ""
webkitMarginAfterCollapse: ""
webkitMarginBefore: ""
webkitMarginBeforeCollapse: ""
webkitMarginBottomCollapse: ""
webkitMarginCollapse: ""
webkitMarginEnd: ""
webkitMarginStart: ""
webkitMarginTopCollapse: ""
webkitMarquee: ""
webkitMarqueeDirection: ""
webkitMarqueeIncrement: ""
webkitMarqueeRepetition: ""
webkitMarqueeSpeed: ""
webkitMarqueeStyle: ""
webkitMask: ""
webkitMaskAttachment: ""
webkitMaskBoxImage: ""
webkitMaskBoxImageOutset: ""
webkitMaskBoxImageRepeat: ""
webkitMaskBoxImageSlice: ""
webkitMaskBoxImageSource: ""
webkitMaskBoxImageWidth: ""
webkitMaskClip: ""
webkitMaskComposite: ""
webkitMaskImage: ""
webkitMaskOrigin: ""
webkitMaskPosition: ""
webkitMaskPositionX: ""
webkitMaskPositionY: ""
webkitMaskRepeat: ""
webkitMaskRepeatX: ""
webkitMaskRepeatY: ""
webkitMaskSize: ""
webkitMatchNearestMailBlockquoteColor: ""
webkitMaxLogicalHeight: ""
webkitMaxLogicalWidth: ""
webkitMinLogicalHeight: ""
webkitMinLogicalWidth: ""
webkitNbspMode: ""
webkitPaddingAfter: ""
webkitPaddingBefore: ""
webkitPaddingEnd: ""
webkitPaddingStart: ""
webkitPerspective: ""
webkitPerspectiveOrigin: ""
webkitPerspectiveOriginX: ""
webkitPerspectiveOriginY: ""
webkitPrintColorAdjust: ""
webkitRtlOrdering: ""
webkitSvgShadow: ""
webkitTextCombine: ""
webkitTextDecorationsInEffect: ""
webkitTextEmphasis: ""
webkitTextEmphasisColor: ""
webkitTextEmphasisPosition: ""
webkitTextEmphasisStyle: ""
webkitTextFillColor: ""
webkitTextOrientation: ""
webkitTextSecurity: ""
webkitTextSizeAdjust: ""
webkitTextStroke: ""
webkitTextStrokeColor: ""
webkitTextStrokeWidth: ""
webkitTransform: ""
webkitTransformOrigin: ""
webkitTransformOriginX: ""
webkitTransformOriginY: ""
webkitTransformOriginZ: ""
webkitTransformStyle: ""
webkitTransition: ""
webkitTransitionDelay: ""
webkitTransitionDuration: ""
webkitTransitionProperty: ""
webkitTransitionTimingFunction: ""
webkitUserDrag: ""
webkitUserModify: ""
webkitUserSelect: ""
webkitWritingMode: ""
whiteSpace: ""
widows: ""
width: ""
wordBreak: ""
wordSpacing: ""
wordWrap: ""
writingMode: ""
zIndex: ""
zoom: ""
__proto__: CSSStyleDeclarationPrototype
getPropertyCSSValue: function getPropertyCSSValue() {
getPropertyPriority: function getPropertyPriority() {
getPropertyShorthand: function getPropertyShorthand() {
getPropertyValue: function getPropertyValue() {
isPropertyImplicit: function isPropertyImplicit() {
item: function item() {
removeProperty: function removeProperty() {
setProperty: function setProperty() {
__proto__: Object
詳細
console.log(document.getElementById('textBox1').style.color);
..結果は次のとおりです。
color: "rgb(255, 255, 255)"
ループ (基本的な例。改良が必要な場合があります)
var styles = document.getElementById('textBox1').style;
for (var i in styles) {
if (
i !== '0'
&& styles[i] != ''
&& styles[i] != undefined
&& styles[i] != null
&& styles.hasOwnProperty(i)
&& styles[i].length != undefined) {
console.log(i + ' : ' + styles[i] + ' : ' + styles[i].length);
}
}
..戻り値：
color : rgb(255, 255, 255) : 18
cssText : color: rgb(255, 255, 255); : 27
ノート
これらの呼び出しは、継承されたスタイルを取得していないようです! たとえば、ノードの親に がある場合font-size: 16px、fontSizeプロパティは継承されません。そのため、実際のノードに到達するまで DOM ツリーをたどり、すべてのスタイルを収集する必要があります。ただし、これには、継承されるものと継承されないものを知る必要もあります。これをコード単位で行うのは非常に面倒です。
これをより効率的に行うために誰かがコメントできる場合は、私はすべて耳にします:)
より多くの分散
parentStyleスタイルシート呼び出しを使用すると、次のように を呼び出すメソッドが取得されます。
var rules = document.styleSheets[0].cssRules;
//console.log(rules);
for (var i in rules) {
var selector = rules[i].selectorText;
if (selector != undefined) {
var regex = selector.match(/textBox1/g);
if (regex !== null && regex.length > 0) {
console.log(rules[i].style);
}
}
}
..この情報は内部にあります：
parentRule: CSSStyleRule
constructor: CSSStyleRuleConstructor
cssText: "#textBox1 { color: red; }"
parentRule: null
parentStyleSheet: CSSStyleSheet
selectorText: "#textBox1"
style: CSSStyleDeclaration
type: 1
__proto__: CSSStyleRulePrototype
このメソッドでは、呼び出すスタイルシートを通じてすべてのスタイルを設定する必要があることに注意してください。この例も、最初に見つかったスタイルシートを選択する場合にのみ機能します。複数のスタイルシートがある場合は、ループ マッチを行うか、事前にインデックスを把握しておく必要があります。
資力