vue 获取dom的css属性值-优快云博客

本文介绍在Vue.js中如何使用ref属性获取DOM元素如div和img的高度、宽度及图片源路径。通过mounted生命周期钩子函数，演示了如何访问和打印这些样式属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div id="topInfo" ref="topInfo" style="width: 200px;height: 200px;background-color: #0bb20c">
    <img id="imgInfo" ref="imgInfo" src="./20151205231902_xe2kG.jpeg" alt="" height="200px"  >
  </div>
</template>
 
<script>
    export default {
        name: "center",
      mounted() {
//div 标签获取的方法
        let topInfowidth = this.$refs.topInfo.style.width;
        let topInfoheight = this.$refs.topInfo.style.height;
        console.log("topInfo:"+topInfowidth+"  "+topInfoheight)
 
        console.log("=================================================")
//img 标签获取的方法
        let imgInfowidth = this.$refs.imgInfo.width;
        let imgInfoheight = this.$refs.imgInfo.height;
        console.log("imgInfo:"+imgInfowidth+"  "+imgInfoheight)
        let src = this.$refs.imgInfo.src;
        console.log("src:"+src)
 
      }   //获取dom元素高度通过在标签里面定义ref属性，用this.$refs.自定义名称.offsetHight;去获取。
    }
</script>
 
<style scoped>
  #topInfo{
  overflow: hidden;
}
</style>

let imgInfo = this.$refs.imgInfo;
console.log(imgInfo)
if (imgInfo) {
  let src = this.$refs.imgInfo.src;  //有时候这一段会报错说获取不到，那么就要判断一下
  console.log(src)
}

1、div 包含img，在li标签里面

<li id="imgBox" >
  <div class="box"> //不知道为什么之前试的时候img 总是不能被div包含，现在突然又可以了，神奇
    <img src="../home/20151205231902_xe2kG.jpeg" ref="imgInfo" :onload="drawImage_box()" class="imsg">
  </div>
  <i class="delImg" v-on:click="delImg(key)"> X </i>
</li>

注意：需要在mounted中才能获取到

CSSStyleDeclaration {0: "width", 1: "height", 2: "background-color", 3: "padding-bottom", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
alignContent:""
alignItems:""
alignSelf:""
alignmentBaseline:""
all:""
animation:""
animationDelay:""
animationDirection:""
animationDuration:""
animationFillMode:""
animationIterationCount:""
animationName:""
animationPlayState:""
animationTimingFunction:""
backdropFilter:""
backfaceVisibility:""
background:""
backgroundAttachment:""
backgroundBlendMode:""
backgroundClip:""
backgroundColor:"rgb(11, 178, 12)"
backgroundImage:""
backgroundOrigin:""
backgroundPosition:""
backgroundPositionX:""
backgroundPositionY:""
backgroundRepeat:""
backgroundRepeatX:""
backgroundRepeatY:""
backgroundSize:""
baselineShift:""
blockSize:""
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:""
breakAfter:""
breakBefore:""
breakInside:""
bufferedRendering:""
captionSide:""
caretColor:""
clear:""
clip:""
clipPath:""
clipRule:""
color:""
colorInterpolation:""
colorInterpolationFilters:""
colorRendering:""
columnCount:""
columnFill:""
columnGap:""
columnRule:""
columnRuleColor:""
columnRuleStyle:""
columnRuleWidth:""
columnSpan:""
columnWidth:""
columns:""
contain:""
content:""
counterIncrement:""
counterReset:""
cssFloat:""
cssText:"width: 20px; height: 100px; background-color: rgb(11, 178, 12); padding-bottom: 55px;"
cursor:""
cx:""
cy:""
d:""
direction:""
display:""
dominantBaseline:""
emptyCells:""
fill:""
fillOpacity:""
fillRule:""
filter:""
flex:""
flexBasis:""
flexDirection:""
flexFlow:""
flexGrow:""
flexShrink:""
flexWrap:""
float:""
floodColor:""
floodOpacity:""
font:""
fontDisplay:""
fontFamily:""
fontFeatureSettings:""
fontKerning:""
fontSize:""
fontSizeAdjust:""
fontStretch:""
fontStyle:""
fontVariant:""
fontVariantCaps:""
fontVariantLigatures:""
fontVariantNumeric:""
fontVariationSettings:""
fontWeight:""
grid:""
gridArea:""
gridAutoColumns:""
gridAutoFlow:""
gridAutoRows:""
gridColumn:""
gridColumnEnd:""
gridColumnGap:""
gridColumnStart:""
gridGap:""
gridRow:""
gridRowEnd:""
gridRowGap:""
gridRowStart:""
gridTemplate:""
gridTemplateAreas:""
gridTemplateColumns:""
gridTemplateRows:""
height:"100px"
hyphens:""
imageRendering:""
inlineSize:""
isolation:""
justifyContent:""
justifyItems:""
justifySelf:""
left:""
length:4
letterSpacing:""
lightingColor:""
lineHeight:""
lineHeightStep:""
listStyle:""
listStyleImage:""
listStylePosition:""
listStyleType:""
margin:""
marginBottom:""
marginLeft:""
marginRight:""
marginTop:""
marker:""
markerEnd:""
markerMid:""
markerStart:""
mask:""
maskSourceType:""
maskType:""
maxBlockSize:""
maxHeight:""
maxInlineSize:""
maxWidth:""
maxZoom:""
minBlockSize:""
minHeight:""
minInlineSize:""
minWidth:""
minZoom:""
mixBlendMode:""
objectFit:""
objectPosition:""
offset:""
offsetAnchor:""
offsetDistance:""
offsetPath:""
offsetPosition:""
offsetRotate:""
opacity:""
order:""
orientation:""
orphans:""
outline:""
outlineColor:""
outlineOffset:""
outlineStyle:""
outlineWidth:""
overflow:""
overflowAnchor:""
overflowWrap:""
overflowX:""
overflowY:""
padding:""
paddingBottom:"55px"
paddingLeft:""
paddingRight:""
paddingTop:""
page:""
pageBreakAfter:""
pageBreakBefore:""
pageBreakInside:""
paintOrder:""
parentRule:null
perspective:""
perspectiveOrigin:""
placeContent:""
placeItems:""
placeSelf:""
pointerEvents:""
position:""
quotes:""
r:""
resize:""
right:""
rotate:""
rx:""
ry:""
scale:""
scrollBehavior:""
shapeImageThreshold:""
shapeMargin:""
shapeOutside:""
shapeRendering:""
size:""
speak:""
src:""
stopColor:""
stopOpacity:""
stroke:""
strokeDasharray:""
strokeDashoffset:""
strokeLinecap:""
strokeLinejoin:""
strokeMiterlimit:""
strokeOpacity:""
strokeWidth:""
tabSize:""
tableLayout:""
textAlign:""
textAlignLast:""
textAnchor:""
textCombineUpright:""
textDecoration:""
textDecorationColor:""
textDecorationLine:""
textDecorationSkip:""
textDecorationStyle:""
textIndent:""
textJustify:""
textOrientation:""
textOverflow:""
textRendering:""
textShadow:""
textSizeAdjust:""
textTransform:""
textUnderlinePosition:""
top:""
touchAction:""
transform:""
transformBox:""
transformOrigin:""
transformStyle:""
transition:""
transitionDelay:""
transitionDuration:""
transitionProperty:""
transitionTimingFunction:""
translate:""
unicodeBidi:""
unicodeRange:""
userSelect:""
userZoom:""
vectorEffect:""
verticalAlign:""
visibility:""
webkitAppRegion:""
webkitAppearance:""
webkitBackgroundClip:""
webkitBackgroundOrigin:""
webkitBorderAfter:""
webkitBorderAfterColor:""
webkitBorderAfterStyle:""
webkitBorderAfterWidth:""
webkitBorderBefore:""
webkitBorderBeforeColor:""
webkitBorderBeforeStyle:""
webkitBorderBeforeWidth:""
webkitBorderEnd:""
webkitBorderEndColor:""
webkitBorderEndStyle:""
webkitBorderEndWidth:""
webkitBorderHorizontalSpacing:""
webkitBorderImage:""
webkitBorderStart:""
webkitBorderStartColor:""
webkitBorderStartStyle:""
webkitBorderStartWidth:""
webkitBorderVerticalSpacing:""
webkitBoxAlign:""
webkitBoxDecorationBreak:""
webkitBoxDirection:""
webkitBoxFlex:""
webkitBoxFlexGroup:""
webkitBoxLines:""
webkitBoxOrdinalGroup:""
webkitBoxOrient:""
webkitBoxPack:""
webkitBoxReflect:""
webkitColumnBreakAfter:""
webkitColumnBreakBefore:""
webkitColumnBreakInside:""
webkitFontSizeDelta:""
webkitFontSmoothing:""
webkitHighlight:""
webkitHyphenateCharacter:""
webkitLineBreak:""
webkitLineClamp:""
webkitLocale:""
webkitLogicalHeight:""
webkitLogicalWidth:""
webkitMarginAfter:""
webkitMarginAfterCollapse:""
webkitMarginBefore:""
webkitMarginBeforeCollapse:""
webkitMarginBottomCollapse:""
webkitMarginCollapse:""
webkitMarginEnd:""
webkitMarginStart:""
webkitMarginTopCollapse:""
webkitMask:""
webkitMaskBoxImage:""
webkitMaskBoxImageOutset:""
webkitMaskBoxImageRepeat:""
webkitMaskBoxImageSlice:""
webkitMaskBoxImageSource:""
webkitMaskBoxImageWidth:""
webkitMaskClip:""
webkitMaskComposite:""
webkitMaskImage:""
webkitMaskOrigin:""
webkitMaskPosition:""
webkitMaskPositionX:""
webkitMaskPositionY:""
webkitMaskRepeat:""
webkitMaskRepeatX:""
webkitMaskRepeatY:""
webkitMaskSize:""
webkitMaxLogicalHeight:""
webkitMaxLogicalWidth:""
webkitMinLogicalHeight:""
webkitMinLogicalWidth:""
webkitPaddingAfter:""
webkitPaddingBefore:""
webkitPaddingEnd:""
webkitPaddingStart:""
webkitPerspectiveOriginX:""
webkitPerspectiveOriginY:""
webkitPrintColorAdjust:""
webkitRtlOrdering:""
webkitRubyPosition:""
webkitTapHighlightColor:""
webkitTextCombine:""
webkitTextDecorationsInEffect:""
webkitTextEmphasis:""
webkitTextEmphasisColor:""
webkitTextEmphasisPosition:""
webkitTextEmphasisStyle:""
webkitTextFillColor:""
webkitTextOrientation:""
webkitTextSecurity:""
webkitTextStroke:""
webkitTextStrokeColor:""
webkitTextStrokeWidth:""
webkitTransformOriginX:""
webkitTransformOriginY:""
webkitTransformOriginZ:""
webkitUserDrag:""
webkitUserModify:""
webkitWritingMode:""
whiteSpace:""
widows:""
width:"20px"
willChange:""
wordBreak:""
wordSpacing:""
wordWrap:""
writingMode:""
x:""
y:""
zIndex:""
zoom:""
0:"width"
1:"height"
2:"background-color"
3:"padding-bottom"