vue 获取dom的css属性值

最新推荐文章于 2024-08-16 23:09:58 发布
最新推荐文章于 2024-08-16 23:09:58 发布
阅读量4.3k 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oTianKuaiLe/article/details/84233288
版权 
<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>

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

  1. CSSStyleDeclaration {0: "width", 1: "height", 2: "background-color", 3: "padding-bottom", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
    1. alignContent:""
    2. alignItems:""
    3. alignSelf:""
    4. alignmentBaseline:""
    5. all:""
    6. animation:""
    7. animationDelay:""
    8. animationDirection:""
    9. animationDuration:""
    10. animationFillMode:""
    11. animationIterationCount:""
    12. animationName:""
    13. animationPlayState:""
    14. animationTimingFunction:""
    15. backdropFilter:""
    16. backfaceVisibility:""
    17. background:""
    18. backgroundAttachment:""
    19. backgroundBlendMode:""
    20. backgroundClip:""
    21. backgroundColor:"rgb(11, 178, 12)"
    22. backgroundImage:""
    23. backgroundOrigin:""
    24. backgroundPosition:""
    25. backgroundPositionX:""
    26. backgroundPositionY:""
    27. backgroundRepeat:""
    28. backgroundRepeatX:""
    29. backgroundRepeatY:""
    30. backgroundSize:""
    31. baselineShift:""
    32. blockSize:""
    33. border:""
    34. borderBottom:""
    35. borderBottomColor:""
    36. borderBottomLeftRadius:""
    37. borderBottomRightRadius:""
    38. borderBottomStyle:""
    39. borderBottomWidth:""
    40. borderCollapse:""
    41. borderColor:""
    42. borderImage:""
    43. borderImageOutset:""
    44. borderImageRepeat:""
    45. borderImageSlice:""
    46. borderImageSource:""
    47. borderImageWidth:""
    48. borderLeft:""
    49. borderLeftColor:""
    50. borderLeftStyle:""
    51. borderLeftWidth:""
    52. borderRadius:""
    53. borderRight:""
    54. borderRightColor:""
    55. borderRightStyle:""
    56. borderRightWidth:""
    57. borderSpacing:""
    58. borderStyle:""
    59. borderTop:""
    60. borderTopColor:""
    61. borderTopLeftRadius:""
    62. borderTopRightRadius:""
    63. borderTopStyle:""
    64. borderTopWidth:""
    65. borderWidth:""
    66. bottom:""
    67. boxShadow:""
    68. boxSizing:""
    69. breakAfter:""
    70. breakBefore:""
    71. breakInside:""
    72. bufferedRendering:""
    73. captionSide:""
    74. caretColor:""
    75. clear:""
    76. clip:""
    77. clipPath:""
    78. clipRule:""
    79. color:""
    80. colorInterpolation:""
    81. colorInterpolationFilters:""
    82. colorRendering:""
    83. columnCount:""
    84. columnFill:""
    85. columnGap:""
    86. columnRule:""
    87. columnRuleColor:""
    88. columnRuleStyle:""
    89. columnRuleWidth:""
    90. columnSpan:""
    91. columnWidth:""
    92. columns:""
    93. contain:""
    94. content:""
    95. counterIncrement:""
    96. counterReset:""
    97. cssFloat:""
    98. cssText:"width: 20px; height: 100px; background-color: rgb(11, 178, 12); padding-bottom: 55px;"
    99. cursor:""
    100. cx:""
    101. cy:""
    102. d:""
    103. direction:""
    104. display:""
    105. dominantBaseline:""
    106. emptyCells:""
    107. fill:""
    108. fillOpacity:""
    109. fillRule:""
    110. filter:""
    111. flex:""
    112. flexBasis:""
    113. flexDirection:""
    114. flexFlow:""
    115. flexGrow:""
    116. flexShrink:""
    117. flexWrap:""
    118. float:""
    119. floodColor:""
    120. floodOpacity:""
    121. font:""
    122. fontDisplay:""
    123. fontFamily:""
    124. fontFeatureSettings:""
    125. fontKerning:""
    126. fontSize:""
    127. fontSizeAdjust:""
    128. fontStretch:""
    129. fontStyle:""
    130. fontVariant:""
    131. fontVariantCaps:""
    132. fontVariantLigatures:""
    133. fontVariantNumeric:""
    134. fontVariationSettings:""
    135. fontWeight:""
    136. grid:""
    137. gridArea:""
    138. gridAutoColumns:""
    139. gridAutoFlow:""
    140. gridAutoRows:""
    141. gridColumn:""
    142. gridColumnEnd:""
    143. gridColumnGap:""
    144. gridColumnStart:""
    145. gridGap:""
    146. gridRow:""
    147. gridRowEnd:""
    148. gridRowGap:""
    149. gridRowStart:""
    150. gridTemplate:""
    151. gridTemplateAreas:""
    152. gridTemplateColumns:""
    153. gridTemplateRows:""
    154. height:"100px"
    155. hyphens:""
    156. imageRendering:""
    157. inlineSize:""
    158. isolation:""
    159. justifyContent:""
    160. justifyItems:""
    161. justifySelf:""
    162. left:""
    163. length:4
    164. letterSpacing:""
    165. lightingColor:""
    166. lineHeight:""
    167. lineHeightStep:""
    168. listStyle:""
    169. listStyleImage:""
    170. listStylePosition:""
    171. listStyleType:""
    172. margin:""
    173. marginBottom:""
    174. marginLeft:""
    175. marginRight:""
    176. marginTop:""
    177. marker:""
    178. markerEnd:""
    179. markerMid:""
    180. markerStart:""
    181. mask:""
    182. maskSourceType:""
    183. maskType:""
    184. maxBlockSize:""
    185. maxHeight:""
    186. maxInlineSize:""
    187. maxWidth:""
    188. maxZoom:""
    189. minBlockSize:""
    190. minHeight:""
    191. minInlineSize:""
    192. minWidth:""
    193. minZoom:""
    194. mixBlendMode:""
    195. objectFit:""
    196. objectPosition:""
    197. offset:""
    198. offsetAnchor:""
    199. offsetDistance:""
    200. offsetPath:""
    201. offsetPosition:""
    202. offsetRotate:""
    203. opacity:""
    204. order:""
    205. orientation:""
    206. orphans:""
    207. outline:""
    208. outlineColor:""
    209. outlineOffset:""
    210. outlineStyle:""
    211. outlineWidth:""
    212. overflow:""
    213. overflowAnchor:""
    214. overflowWrap:""
    215. overflowX:""
    216. overflowY:""
    217. padding:""
    218. paddingBottom:"55px"
    219. paddingLeft:""
    220. paddingRight:""
    221. paddingTop:""
    222. page:""
    223. pageBreakAfter:""
    224. pageBreakBefore:""
    225. pageBreakInside:""
    226. paintOrder:""
    227. parentRule:null
    228. perspective:""
    229. perspectiveOrigin:""
    230. placeContent:""
    231. placeItems:""
    232. placeSelf:""
    233. pointerEvents:""
    234. position:""
    235. quotes:""
    236. r:""
    237. resize:""
    238. right:""
    239. rotate:""
    240. rx:""
    241. ry:""
    242. scale:""
    243. scrollBehavior:""
    244. shapeImageThreshold:""
    245. shapeMargin:""
    246. shapeOutside:""
    247. shapeRendering:""
    248. size:""
    249. speak:""
    250. src:""
    251. stopColor:""
    252. stopOpacity:""
    253. stroke:""
    254. strokeDasharray:""
    255. strokeDashoffset:""
    256. strokeLinecap:""
    257. strokeLinejoin:""
    258. strokeMiterlimit:""
    259. strokeOpacity:""
    260. strokeWidth:""
    261. tabSize:""
    262. tableLayout:""
    263. textAlign:""
    264. textAlignLast:""
    265. textAnchor:""
    266. textCombineUpright:""
    267. textDecoration:""
    268. textDecorationColor:""
    269. textDecorationLine:""
    270. textDecorationSkip:""
    271. textDecorationStyle:""
    272. textIndent:""
    273. textJustify:""
    274. textOrientation:""
    275. textOverflow:""
    276. textRendering:""
    277. textShadow:""
    278. textSizeAdjust:""
    279. textTransform:""
    280. textUnderlinePosition:""
    281. top:""
    282. touchAction:""
    283. transform:""
    284. transformBox:""
    285. transformOrigin:""
    286. transformStyle:""
    287. transition:""
    288. transitionDelay:""
    289. transitionDuration:""
    290. transitionProperty:""
    291. transitionTimingFunction:""
    292. translate:""
    293. unicodeBidi:""
    294. unicodeRange:""
    295. userSelect:""
    296. userZoom:""
    297. vectorEffect:""
    298. verticalAlign:""
    299. visibility:""
    300. webkitAppRegion:""
    301. webkitAppearance:""
    302. webkitBackgroundClip:""
    303. webkitBackgroundOrigin:""
    304. webkitBorderAfter:""
    305. webkitBorderAfterColor:""
    306. webkitBorderAfterStyle:""
    307. webkitBorderAfterWidth:""
    308. webkitBorderBefore:""
    309. webkitBorderBeforeColor:""
    310. webkitBorderBeforeStyle:""
    311. webkitBorderBeforeWidth:""
    312. webkitBorderEnd:""
    313. webkitBorderEndColor:""
    314. webkitBorderEndStyle:""
    315. webkitBorderEndWidth:""
    316. webkitBorderHorizontalSpacing:""
    317. webkitBorderImage:""
    318. webkitBorderStart:""
    319. webkitBorderStartColor:""
    320. webkitBorderStartStyle:""
    321. webkitBorderStartWidth:""
    322. webkitBorderVerticalSpacing:""
    323. webkitBoxAlign:""
    324. webkitBoxDecorationBreak:""
    325. webkitBoxDirection:""
    326. webkitBoxFlex:""
    327. webkitBoxFlexGroup:""
    328. webkitBoxLines:""
    329. webkitBoxOrdinalGroup:""
    330. webkitBoxOrient:""
    331. webkitBoxPack:""
    332. webkitBoxReflect:""
    333. webkitColumnBreakAfter:""
    334. webkitColumnBreakBefore:""
    335. webkitColumnBreakInside:""
    336. webkitFontSizeDelta:""
    337. webkitFontSmoothing:""
    338. webkitHighlight:""
    339. webkitHyphenateCharacter:""
    340. webkitLineBreak:""
    341. webkitLineClamp:""
    342. webkitLocale:""
    343. webkitLogicalHeight:""
    344. webkitLogicalWidth:""
    345. webkitMarginAfter:""
    346. webkitMarginAfterCollapse:""
    347. webkitMarginBefore:""
    348. webkitMarginBeforeCollapse:""
    349. webkitMarginBottomCollapse:""
    350. webkitMarginCollapse:""
    351. webkitMarginEnd:""
    352. webkitMarginStart:""
    353. webkitMarginTopCollapse:""
    354. webkitMask:""
    355. webkitMaskBoxImage:""
    356. webkitMaskBoxImageOutset:""
    357. webkitMaskBoxImageRepeat:""
    358. webkitMaskBoxImageSlice:""
    359. webkitMaskBoxImageSource:""
    360. webkitMaskBoxImageWidth:""
    361. webkitMaskClip:""
    362. webkitMaskComposite:""
    363. webkitMaskImage:""
    364. webkitMaskOrigin:""
    365. webkitMaskPosition:""
    366. webkitMaskPositionX:""
    367. webkitMaskPositionY:""
    368. webkitMaskRepeat:""
    369. webkitMaskRepeatX:""
    370. webkitMaskRepeatY:""
    371. webkitMaskSize:""
    372. webkitMaxLogicalHeight:""
    373. webkitMaxLogicalWidth:""
    374. webkitMinLogicalHeight:""
    375. webkitMinLogicalWidth:""
    376. webkitPaddingAfter:""
    377. webkitPaddingBefore:""
    378. webkitPaddingEnd:""
    379. webkitPaddingStart:""
    380. webkitPerspectiveOriginX:""
    381. webkitPerspectiveOriginY:""
    382. webkitPrintColorAdjust:""
    383. webkitRtlOrdering:""
    384. webkitRubyPosition:""
    385. webkitTapHighlightColor:""
    386. webkitTextCombine:""
    387. webkitTextDecorationsInEffect:""
    388. webkitTextEmphasis:""
    389. webkitTextEmphasisColor:""
    390. webkitTextEmphasisPosition:""
    391. webkitTextEmphasisStyle:""
    392. webkitTextFillColor:""
    393. webkitTextOrientation:""
    394. webkitTextSecurity:""
    395. webkitTextStroke:""
    396. webkitTextStrokeColor:""
    397. webkitTextStrokeWidth:""
    398. webkitTransformOriginX:""
    399. webkitTransformOriginY:""
    400. webkitTransformOriginZ:""
    401. webkitUserDrag:""
    402. webkitUserModify:""
    403. webkitWritingMode:""
    404. whiteSpace:""
    405. widows:""
    406. width:"20px"
    407. willChange:""
    408. wordBreak:""
    409. wordSpacing:""
    410. wordWrap:""
    411. writingMode:""
    412. x:""
    413. y:""
    414. zIndex:""
    415. zoom:""
    416. 0:"width"
    417. 1:"height"
    418. 2:"background-color"
    419. 3:"padding-bottom"
陈学礼
关注
专栏目录
vue3 - 获取DOM元素并且修改元素样式示例源码，当点击一个元素（比如按钮、容器）需要用更改 style css 的样式（附带详细的功能示例及解决方案）
高级前端工程师
04-12 5526
vue3获取元素并修改元素样式，vue3.0点击修改元素的css样式，vue3怎么修改元素css属性，vue3动态的改变样式，vue3中动态style(动态修改伪元素样式)，Vue3获取DOM元素样式和样式更改示例，vue3通过ref获取dom元素并修改样式，Vue3中如何获取dom元素并修改样式，Vue3 动态修改dom样式，vue3获取dom元素节点并操作元素的样式，vue3.0 获取dom设置样式，Vue3获取DOM元素并修改属性的方法，vue3 怎么动态改变element内部dom元素的样式，vue
vue获取css内容进行替换_Vue.js中对css的操作（修改）具体方式详解
weixin_39879651的博客
12-21 2066
使用v-bind：class或者v-bind:style或者直接通过操作dom来对其样式进行更改；1.v-bind:class || v-bind:style其中v-bind是指令，: 后面的class 和style是参数，而class之后的指在vue的官方文档里被称为'指令预期值'(这个不必深究，反正个人觉得初学知道他叫啥名有啥用就好了)同v-bind的大多数指令(部分特殊指令如V-for除外)...
vue获取dom css样式
Hailee7的博客
07-27 688
// 获取高度值 （内容高+padding+边框） let height= this.refs.getheight.offsetHeight;//获取元素样式值（存在单位）letheight=window.getComputedStyle(this.refs.getheight.offsetHeight; // 获取元素样式值 （存在单位） let height = window.getComputedStyle(this.refs.getheight.offsetHeight;//获取元素样式值（存在单
CSS自定义属性的设置与获取
读心悦
08-16 346
在CSS中，自定义属性是通过在选择器内部使用--前缀来声明的。这些属性通常定义在:root伪类中，以便在整个文档范围内使用，但也可以定义在任何其他选择器中以限制其作用域。:root {/* 只在这个容器内有效 */在JavaScript中，你可以使用方法来设置自定义属性的值。这个方法接受三个参数：属性名（不带--前缀）、值和一个可选的优先级字符串（如// 设置全局自定义属性// 设置特定元素的自定义属性要获取自定义属性的值，你可以使用方法结合方法。注意，获取自定义属性时需要包括--前缀。
Vue.js中对css的操作
热门推荐
诗水人间
06-17 15万+
原文链接：https://blog.csdn.net/tan1071923745/article/details/81162667 此篇博客为转载内容，做个记录，方便自己日后查找使用 总结下面的内容，最简单的方式是给需要操作的dom元素添加ref="refName"属性， 然后通过this.$refs.refName.style.要修改的样式=修改的值 即可完成修改css 使用v-bind：class或者v-bind:style或者直接通过操作dom来对其样式进行更改； 1.v-bind:class .
通过Dom操作元素属性值
m0_61872317的博客
12-06 405
【代码】通过dom操作元素属性值。
vue操作dom元素的3种方法示例
10-14
虽然不是直接操作DOM，但Vue的`v-model`和`v-bind`指令可以间接地帮助我们管理DOM元素的属性。`v-model`用于双向绑定输入元素的值，而`v-bind`可以用来绑定任何属性，包括样式。例如： ```html ...
解决vue项目获取dom元素宽高总是不准确问题
10-15
在Vue项目中，开发者经常需要获取DOM元素的宽高，以进行各种布局和交互的处理。然而，在实际操作中，可能会遇到获取的宽高不准确的问题，特别是在数据动态更新后。这个问题通常源于DOM元素尚未完成渲染，导致获取的...
Vue2 css signal chart
01-19
- **模板语法**：Vue2使用模板语法来定义DOM结构，如`<template>`，`<div>`，以及使用`v-bind`（简写`: `）和`v-on`（简写`@`）指令绑定属性和事件。 - **数据绑定**：Vue2的双向数据绑定是其一大特点，`v-model`...
DOM—操作元素（获取属性值、设置属性值、 移除属性）
m0_59030524的博客
02-18 2025
1. 自定义属性的操作 1.1 获取属性值 element . 属性 获取属性值；（元素本身自带的属性） element . getAttribute( ' 属性 ' )；（主要获取自定义的属性（标准）） <body> <div id="demo" index='12'></div> <script> var div = document.querySelector('div'); // 1. 获...
DOM获取、设置元素属性
awsl_666的博客
08-23 405
一、获取元素属性 1.getAttribute():只有在获取自定义属性值的情况下才会使用。 一般情况使用对象的属性。 二、设置元素属性 1.setAttribute():两个参数： （1）要设置的属性名 （2）要设置的值 注意：会以指定的值替换现有的值，如果属性不存在，则会创建该属性并设置相应的值。 <ul> <li id="one" mycolor="red"...
DOM（一）：获取页面元素、操作元素、自定义属性
weixin_53912712的博客
12-23 1995
获取页面元素、操作元素
vue项目中使用ref来获取dom及给class绑定属性的命名注意事项
如影随风
06-04 2万+
使用ref来获取dom的时候，在给ref命名的时候尽量使用驼峰命名法，不能使用'-'（像‘auto-play’这样的命名就是错误的，应该改为'autoPlay'这样）；而在给class绑定属性的时候，也应该避免使用'-'。例如，  :class="{audit-btn:isBtn}" 是错误的，正确的写法是:class="{auditBtn:isBtn}"...
01-DOM-获取DOM元素、修改属性
weixin_44941576的博客
04-05 1427
DOM-获取DOM元素、修改属性 Web API 基本认知 1.作用和分类 作用: 就是使用 JS 去操作 html 和浏览器 分类：DOM (文档对象模型)、BOM（浏览器对象模型） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vPOKUg7l-1649142008677)(01-DOM-获取DOM元素、修改属性.assets/1648970987152.png)] 2.什么是DOM DOM（Document Object Model——文档对象模型）是用来呈现以及
DOM常用几种获取元素属性方式
m0_68331352的博客
07-30 7006
DOM常用几种获取元素属性方式
JavaScript应用（day01:DOM获取&属性操作）
weixin_51591826的博客
12-14 1196
JS应用中DOM获取&属性操作
vue 中目录结构及功能一览
qq_35814844的博客
09-23 151
获取DOM对象的五种方式
微风的博客
08-15 2706
#获取DOM对象的五种方式 ##一，通过ID获取DOM对象 ``` varxx=document.getElementById（'xx'） ``` ##二.通过签名获取DOM对象 ``` varxx=document.getElementsByTagId（'xx'） ``` ##三.通过类名获取DOM对象（获取的） ``` varxx=document.getElementsByClassName('xx') ``` ##...
vue css 旋转属性
最新发布
09-14
Vue.js 是一个流行的前端JavaScript框架，它允许开发者使用简洁的模板语法来声明式地将数据渲染进DOM系统。在Vue中，CSS样式可以通过各种方式应用到组件中，包括内联样式、组件内样式和全局样式。当你需要在Vue中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值