vue.js 获取当前屏幕的宽度_vue 获取当前屏幕的宽度,图片等比例缩放,动态设置css样式...
vue 获取当前屏幕的宽度,图片等比例缩放
这个是一个背景图,点击对应的圆圈就会出现一个蒙层上面显示详情,但是只要当前窗口大小变化了,因为我的蒙层大小是固定的px,所以不会变,就不在图片对应的位置了
我们要绑定样式style,等后面要根据当前的屏幕来给蒙层动态设置宽高
:to="{name:'/streetDetails',query:{code:'310151101'}}"
:style="style01"
class="street-item item1"
>详情
>
css主要代码
.main {
background: transparent url("../../src/assets/img/street.png") no-repeat;
padding-top: 50.78%;
position: relative;
background-size: 100%;
& .content {
border: 0px;
}
}
.street-item {
height: 92px;
width: 92px;
position: absolute;
max-width: 92px;
min-width: 70px;
min-height: 92px;
min-height: 70px;
text-align: center;
display: block;
line-height: 92px;
// background: #c1bcbc82;
border-radius: 50%;
// border: 1px solid red;
& span {
color: white;
display: none;
}
}
a:hover {
& span {
display: inline-block;
}
background: #4b42426b;
}
.item1 {
position: absolute;
top: 11.3%;
left: 18.1%;
}
主要js代码*
data() {
return {
style01: {
width: 92,
height: 92,
lineheight: 92,
borderRadius: 50
},
centerWidth: "",
centerHeight: ""
};
},
mounted() {
//立即执行
window.onresize = () => {
return (() => {
this.resizeWin();
})();
};
this.resizeWin();
},
methods: {
resizeWin() {
console.log(document.documentElement.clientWidth);
//当前window 宽
this.centerWidth = document.documentElement.scrollWidth;
//最小宽度 1440
var boxH = 92,
boxW = 92;
if (this.centerWidth > 1440) {
boxH = boxW = Math.ceil((this.centerWidth / 1920) * 92);
// console.log("H", boxH);
} else {
boxH = boxW = Math.ceil((1440 / 1920) * 92);
}
// var item = document.getElementsByClassName("street-item");
console.log(this.style01.width);
this.style01.width = boxW + "px";
this.style01.height = boxH + "px";
this.style01.lineHeight = boxH + "px";
this.style01.borderRadius = boxW / 2 + "px";
}
}
vue.js 获取当前屏幕的宽度_vue 获取当前屏幕的宽度,图片等比例缩放,动态设置css样式...相关推荐
- 用JS来动态设置CSS样式
常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 ...
- 用JS来动态设置CSS样式的八种方式
转自:微点阅读 https://www.weidianyuedu.com 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无 ...
- 怎么用JS来动态设置CSS样式
用JS来动态设置CSS样式,常见的有以下几种: 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有"-"号,就写成驼峰的形式(如textAl ...
- 用JS来动态设置CSS样式的常见8种方式。
转自:微点阅读 https://www.weidianyuedu.com 如何用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important ...
- 实现js动态设置css样式,js动态设置全局样式主题色
需求: 1.设置一个全局的样式 2. 样式是需要动态改变的,改变的内容是通过请求后台接口获取的,因此需要js能够对css进行改变 实现: 或许你可能不相信,代码只需要几行 js代码: // 设置主题色 ...
- js里设置html样式,JS 动态设置css样式
1.0 内联样式 : 通过行内样式.style 属性 来编辑给定的HTMLElement的内联样式 let el = document.createElement('div') ; 01) . el. ...
- JS设置CSS样式的几种方式(js设置!important)
JS设置CSS样式的几种方式(js设置!important) x619y 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 ...
- JS设置CSS样式的方式
用JS来动态设置CSS样式,常见的有以下8种方式 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有"-"号,就写成驼峰的形式(如text ...
- JS如何设置CSS样式?
转自:微点阅读 https://www.weidianyuedu.com 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值 ...
最新文章
- 用MATLAB也能做AI系统,而且简单易上手?
- 分享这两年从事Linux系统运维行业的感受
- 插入排序 链表 java_JAVA单链表(多项式)直接插入排序,大家看看我的怎么不行呢...
- 【前端酷站】分享一个纯 Javascript 的图表库与立体像素风制作~
- 《系统集成项目管理工程师》必背100个知识点-38资源平滑和资源平衡
- centos 计算器_centos计算内存CPU正确方法
- UI标签库专题十:JEECG智能开发平台 Form(form标签)
- 麻省理工、微软为AI量身打造了一套leetcode编程题
- cas-server Jdbc 连接读取用户(5)
- Windows核心编程_窗口启动效果
- Bind 一些有趣的东西 【未完待续】
- 使用javascript的“委托”实现attachEvent
- 【全网最全面C语言教程】C语言从入门到精通
- 微正MZFinger指纹识别算法
- 【人因工程】认知行为可靠性评价浅谈
- 红警3命令与征服注册激活启动cdkey联机问题
- 计算机应用高级教程,大学计算机应用高级教程(第3版)简介,目录书摘
- 【Pytorch深度学习50篇】·······第六篇:【常见损失函数篇】-----BCELoss及其变种
- StringTokenizer是什么
- WinXP系统下Opencms的安装与配置