Hii我有一个博客，我想添加一个与http://css-tricks.com/页脚相同的元素（当你向下滚动时会看到一个关于Codepen和ShopTalk的段落）我想将它添加到我的博客中页脚我有HTML，但我不知道要添加什么CSS。
我的HTML是
<div class="bottom-footer-part footer-codepen">
<a class="footer-logo" href="http://codepen.io">
<img alt="CodePen Logo" src="http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/footer-logo-codepen.png">
</a>
<p>
<a href="http://codepen.io">
CodePen
</a>
is a social code playground for web designers and developers. Build demos, find inspiration, or troubleshoot code. With <a href="http://blog.codepen.io/documentation/pro-features/">CodePen PRO</a> you can teach students, pair program, host files, and more!
</p>
</div>
<div class="bottom-footer-part footer-shoptalk">
<a class="footer-logo" href="http://shoptalkshow.com">
<img alt="ShopTalk Logo" src="http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/footer-logo-shoptalk.png">
</a>
<p>
<a href="http://shoptalkshow.com">
ShopTalk
</a>
is a podcast about all things web design and development hosted by Dave Rupert and me. The show is recorded live and covers the week in #hotdrama and listener Q&A.
</p>
</div>
请参阅DO NO推荐我使用Firebug我试过但我无法找到所有分配的CSS。
答案 0 :(得分：3)
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
请注意，此方法要求您通过正在调用的样式表设置所有样式。此示例也仅适用于选择找到的第一个样式表。如果您有多个样式表，则需要预先循环匹配或知道索引。
<强>资源
答案 1 :(得分：1)
使用Chrome开发者工具，通过右键单击页脚并单击“Inspect element”，您可以浏览元素并查看CSS样式。