vue获取dom的css属性值<template>
<div id="topInfo" ref="topInfo" >
<img id="imgInfo" ref="imgInfo" src="./20151205231902_xe2kG.jpeg" alt="" height="200px"  >
</div>
</template>
<script>
export default {
name: "center",
mounted() {
//div 标签获取的⽅法
let topInfowidth = this.$pInfo.style.width;
let topInfoheight = this.$pInfo.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:"" borderRight
Width:"" 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:""html animation属性
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:""

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。