JS Javascript DOM操作之用js做响应式布局(不常用,仅做拓展了解)
2022/1/11 20:04:28
本文主要是介绍JS Javascript DOM操作之用js做响应式布局(不常用,仅做拓展了解),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
JS Javascript DOM操作之用js做响应式布局[附实例代码]--不常用,仅做拓展了解
- 1.设置浏览器视口监听事件resize
- 2.在函数程序中定义一个变量赋值浏览器的用户视口宽度;
- 3.在函数程序中判断用户浏览器的视口宽度进而设置不同宽度下的样式
- 4.示例代码
1.设置浏览器视口监听事件resize
window.addEventListener( ‘resize’ , function(){});
当用户的视口发生改变,运行相应的函数程序;
2.在函数程序中定义一个变量赋值浏览器的用户视口宽度;
3.在函数程序中判断用户浏览器的视口宽度进而设置不同宽度下的样式
4.示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ height: 5000px; } div{ width: 1000px; height: 100px; background: pink; margin: 50px auto; } </style> </head> <body> <div></div> <script> // 获取div标签对象 var oDiv = document.querySelector('div'); // 视窗窗口监听事件 // 当 视窗窗口 宽度高度改变时 触发函数程序 window.addEventListener( 'resize' , function(){ // 视窗窗口 宽度高度改变时 触发函数程序 // 获取 浏览器视窗窗口的宽度 var width = document.documentElement.clientWidth ; // 如果 视窗窗口宽度 大于 1200 div的宽度是原始宽度的100% if( width > 1200 ){ oDiv.style.width = '1000px'; oDiv.style.background = 'pink'; // 如果 视窗窗口宽度 在 1200 至 960 div的宽度是原始宽度的 80% }else if( width <= 1200 && width > 960 ){ oDiv.style.width = '800px'; oDiv.style.background = 'blue'; // 如果 视窗窗口宽度 在 960 至 768 div的宽度是原始宽度的 60% }else if( width <= 960 && width > 768 ){ oDiv.style.width = '600px'; oDiv.style.background = 'orange'; // 如果 视窗窗口宽度 小于 768 div的宽度是原始宽度的 40% }else if( width <= 768 ){ oDiv.style.width = '400px'; oDiv.style.background = 'green'; } }) </script> </body> </html>
这篇关于JS Javascript DOM操作之用js做响应式布局(不常用,仅做拓展了解)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28微服务架构中API版本控制的实践
- 2024-09-28AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
- 2024-09-27Sentinel配置限流资料:新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料:新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料:初学者入门教程
- 2024-09-26Springboot框架资料详解:新手入门教程
- 2024-09-26Springboot企业级开发资料:新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南