vue获取css内容进⾏替换_vue获取dom的css属性值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；去获取。
}
#topInfo{
overflow: hidden;
}
let imgInfo = this.$refs.imgInfo;
console.log(imgInfo)
if (imgInfo) {
let src = this.$refs.imgInfo.src; //有时候这⼀段会报错说获取不到，那么就要判断⼀下
console.log(src)
}
1、div 包含img，在li标签⾥⾯
//不知道为什么之前试的时候img 总是不能被div包含，现在突然⼜可以了，神奇
X
注意：需要在mounted中才能获取到
CSSStyleDeclaration {0: "width", 1: "height", 2: "background-color", 3: "padding-
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:""
borderBottomLeftRadius:"" borderBottomRightRadius:"" borderBottomStyle:"" borderBottomWidth:"" borderCollapse:"" borderColor:"" borderImage:"" borderImageOutset:"" borderImageRepeat:"" borderImageSlice:"" borderImageSource:"" borderImageWidth:"" borderLeft:"" borderLeftColor:"" bor
derLeftStyle:"" borderLeftWidth:"" borderRadius:"" borderRight:"" borderRightColor:"" borderRightStyle:"" borderRightWidth:"" borderSpacing:"" borderStyle:"" borderTop:"" borderTopColor:"" borderTopLeftRadius:"" borderTopRightRadius:"" borderTopStyle:"" borderTopWidth:"" borderWidth:""rotate属性
bottom:""
boxShadow:""
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:""
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:""

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