vue脚手架获取元素节点设置css为什么没反应

<style type="text/css">

#outside{width:200px;height:100px;border:1px solid #ccc;}

#inside{width:80%;height:80%;border:1px solid #c00;}

</style>

<div id="outside"><div id="inside">sdf</div></div>

<script src='jqueryminjs'></script>

<script>

alert(parseInt($('#inside')css('width'))100/parseInt($('#outside')css('width'))+"%");

</script>

<video ref="videoEle" class="video_channel" width="100%" height="auto" :poster="list[0]img"> <source :src="list[0]video"> </video>

<script>

// ref就是获取Dom, 只是把这个元素获取以后帮到$refs对象里了

Vue$refs['video']play();

</script>

你是拿哪个变量接收的返回数据

比如如果你使用变量叫res接收的的话，如果向获取里面的pid的话，针对这条数据，就是

resdata[0]pid

因为data是个数组，虽然这里面只有一个元素

在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误，

这时候可以在 mounted 里用 $refs 来获取样式，并进行更改：

<template>

<div style="display: block;" ref="abc">

<!-- -->

</div>

</template>

<script>

export default {

mounted () {

consolelog(this$refsabcstylecssText)

}

}

</script>

结果是 display: block;

如果我们给一个div设定全屏背景图，就需要获取屏幕高度进行赋值:

<template>

<div ref="nana">

<!-- -->

</div>

</template>

<script>export default {

mounted () {

let w = windowinnerWidth || documentdocumentElementclientWidth || documentbodyclientWidth;

let h = windowinnerHeight || documentdocumentElementclientHeight || documentbodyclientHeight;

this$refsnanastyleheight = h +'px';

}

}

在Vue3中，可以使用ref API来获取子元素，它的泛型定义如下：

ref<T, U>(ref: Ref<T, U>): Ref<T, U>;

其中，T表示需要获取子元素的类型，U表示子元素返回的值类型。

在mounted写 因为我是html标签可以不用加 el(如果是html标签就不用加)

offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）

offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）

clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）

clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）

stylewidth //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）

styleheight //返回元素的高度（包括元素高度，不包括内边距、边框和外边距）

scrollWidth //返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同

scrollHeigh //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同

以上就是关于vue脚手架获取元素节点设置css为什么没反应全部的内容，包括:vue脚手架获取元素节点设置css为什么没反应、vue.js不使用dom *** 作，如何获取元素、接口返回这样的数据，vue如何获取data中的数据等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！