js根据浏览器的宽度不同改变CSS样式

最新推荐文章于 2020-06-08 22:39:14 发布
最新推荐文章于 2020-06-08 22:39:14 发布
阅读量2.3k 收藏
点赞数
分类专栏： css 文章标签： css 浏览器 div class float stylesheet
 CODE:html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    * { margin:0; padding:0;}
    body { font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:150%;}
    #main, #sidebar1, #sidebar2 { float:left; margin-right:6px; border:1px solid #999999; height:500px;}
    #main { display:inline;}
    #sidebar2 { margin-right:0;}
</style>
<script type="text/javas cript" src="chagneStyle.js" ></script>
</head>
<body>
<div id="layout">
    <div id="main"></div>
    <div id="sidebar1">
        <div class="sidebar1_inner"></div>
        <div class="sidebar1_inner"></div>
        <div class="sidebar1_inner"></div>
    </div>
    <div id="sidebar2">
        <div class="sidebar2_inner"></div>
        <div class="sidebar2_inner"></div>
        <div class="sidebar2_inner"></div>
    </div>
</div>
</body>
</html>


CODE:js
// JavaScript Document

sc = {
    //classes
    _className:['style1.css','style2.css','style3.css' ],
    newStyle:null,
   
    init:function(){
        if(this.newStyle === null){
            this.newStyle = document.createElement('link');
            this.newStyle.setAttribute('type' , 'text/css');
            this.newStyle.setAttribute('rel' , 'StyleSheet');
            document.getElementsByTagName('head')[0].appendChild(this.newStyle);
        }
       
        var width = document.getElementsByTagName('body')[0].offsetWidth;
        if(width <= 800){
            this.newStyle.setAttribute('href', this._className[0]);       
        }else if(width <= 1024){
            this.newStyle.setAttribute('href', this._className[1]);   
        }else{
            this.newStyle.setAttribute('href', this._className[2]);           
        }
    }
}

window.onload = function(){sc.init()};
window.onresize = function(){sc.init()};


CODE:css
     style1:
    #main { width:99.5%;}
    #sidebar1 { clear:both; float:left;width:99.5%; height:200px; margin-top:6px;}
    #sidebar2 { clear:both; float:left;width:99.5%; height:200px; margin-top:6px;}

   style2:
   #main { width:738px;}
   #sidebar1 { width:250px; float:right; margin-right:0;}
   #sidebar2 { clear:both; float:left;width:99.6%; height:200px; margin-top:6px;}

style3
   #main { width:618px;}
    #sidebar1 { width:250px;}
    #sidebar2 { width:250px;}

style1,style2,style3是三个不同的样式文件。样式是随便写的，可以根据自己的需求定义
黄巧克力
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用js判断设备的宽度，加载不同的css和js
sinat_24496253的博客
11-30 3154
//获取屏幕宽度，检测是否大于720 var screen_width = document.documentElement.clientWidth > 1000 ? true : false ; (function(){    //获取head对象    var head = document.getElementsByTagName('HEAD')[0];    //创建link对象
JavaScript CSS修改学习第二章 样式
10-29
有时候你想看看文档的默认样式。比如，你的某个段落的宽度是50%，你想知道在用户的浏览器中他的确切的像素是多少。
根据网页宽度给BODY加不同的类名
magicfly9527的专栏
07-04 1451
根据WEB页面宽度给BODY加类名，从而改变CSS样式
js 根据屏幕大小调用不同的css文件
qshting的专栏
12-03 767
莎莎
js实现浏览器宽度改变,样式随之变化
qq_45785424的博客
06-08 1474
响应式做法,浏览器宽度 //document.documentElement.clientWidth 浏览器的宽度 window.onresize = function () { //document.documentElement.clientWidth 浏览器的宽度 if (document.documentElement.clientWidth > 200 && document.documentElement.clientW
js中简单改变HTML中样式（设置颜色，宽度，背景色等以及如何取消自定义设置）
qq_36834525的博客
03-16 4690
javascript JavaScript课程 JavaScript为网页添加动态效果并实现与用户交互的功能。 1. JavaScript入门篇，让不懂JS的你，快速了解JS。 2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。 3. 学完以上两门基础课后，在深入学习JavaScript的变量...
Jquery判断当前屏幕分辨率并加载不同的css样式
资深设计大师
12-24 1万+
$(function () { if ((screen.width == 1024) && (screen.height == 768)) { $("#xx").height(500);//此分辨率下你需要的操作 } else if ((screen.width == 1360) && (screen.height =
css判断不同分辨率显示不同宽度布局实现自适应宽度
09-25
CSS判断不同分辨率浏览器（显示屏幕）显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断，但IE9以下版本不支持CSS3技术，这里DIVCSS5给大家介绍通过JS实现低版本的浏览器也支持CSS3实现实用布局
eqcss：EQCSS是CSS处理器，它向所有浏览器IE8及更高版本引入了元素查询，作用域CSS，父选择器和响应JavaScript。
02-05
与CSS @media查询不同， @element查询不仅可以基于浏览器的宽度或高度，还可以在许多不同的情况下更改样式，例如元素包含多少行文本或子元素。 元素查询带给CSS的另一个概念是将样式“范围”化为一个元素的想法，...
手机开发必备技巧：javascript及CSS功能代码分享
12-12
由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个： 代码如下: width – // viewport 的宽度 （范围从200 到10,000，默认为980 像素） height – // viewport 的...
46种常见的浏览器兼容性问题大汇总
05-15
2. const问题 3 3. event.x与event.y问题 3 ...23. 超链接访问过后hover样式就不出现的问题 3 24. FORM标签 3 25. 属性选择器(这个不能算是兼容,是隐藏css的一个bug) 3 26. 为什么FF下文本无法撑开容器的高度 3
css判断不同分辨率显示不同宽度布局实现自适应宽度&css3 @media样式的使用
Amen的博客
04-25 1万+
css判断不同分辨率显示不同宽度布局实现自适应宽度即 css3 @media样式的使用转自：脚本之家 【css判断不同分辨率显示不同宽度布局实现自适应宽度】 http://www.jb51.net/css/151312.htmlCSS判断不同分辨率浏览器（显示屏幕）显示不同宽度 布局CSS3技术支持IE6到IE8。 将用到css3 @media样式进行判断， 但IE9以下版本不支持CSS3技术， ...
HTML css3 根据浏览器宽度设置样式
u011380813的专栏
03-11 711
@media(max-width:1000px) and (min-width:800px){body{background: red;}}
css的不同浏览器的唯一标识
JAVA、Javascript专栏
08-26 2838
css的不同浏览器的唯一标识   height:73px;  /*正常浏览器*/ [;height:50px;] /* chrome */ -moz-height:73px;  /*firefox*/ _height:73px;  /*IE6*/ *height:73px;  /*IE7*/ height:73px\9;  /*IE8*/
div随着浏览器窗口大小变更，改变大小（resize）
热门推荐
xuanlv_haoshao的博客
04-01 4万+
浏览器的放大缩小会导致网页布局变动，jquery的resize()方法，可以根据浏览器的窗口大小的变动，对网页进行操作：以下是div随着浏览器窗口大小变更，改变大小（resize）的案例：html:js效果：resizeDiv的块会根据网页变更，大小也随之改变...
JS判断浏览器类型和屏幕分辨率来调用不同的CSS样式
06-02 59
代码如下: &lt;!-- if (window.navigator.userAgent.indexOf("MSIE")&gt;=1) { var IE1024=""; var IE800=""; var IE1152=""; var IEother=""; ScreenWidth(IE1024,IE800,IE1152,IEother) }else{ if (wind
vue3设置浏览器不可改变大小
最新发布
01-05
Vue 3是一个流行的JavaScript框架，用于构建用户界面。虽然Vue本身并没有提供直接的方法来设置浏览器窗口的大小，但我们可以使用其他方法来实现这个目标。 首先，我们可以用CSS样式来限制浏览器窗口的大小。通过设置`max-width`和`max-height`属性，我们可以限制窗口的最大尺寸，从而防止用户改变浏览器大小。例如，我们可以设置body元素的样式如下： ```css body { max-width: 1000px; max-height: 800px; } ``` 这样，当用户尝试调整浏览器窗口大小时，窗口将无法超过指定的宽度和高度。 另外，我们还可以使用JavaScript来捕捉浏览器窗口大小改变的事件，并在事件发生时将窗口大小重置为指定的大小。例如，我们可以在Vue实例的`mounted`生命周期钩子函数中添加以下代码： ```javascript mounted() { window.addEventListener('resize', () => { window.resizeTo(1000, 800); }); } ``` 这样，每当用户尝试改变窗口大小时，窗口都会被强制重置为指定的宽度和高度。 需要注意的是，尽管我们可以限制浏览器窗口的大小，但用户仍然可以通过其他手段（如浏览器开发工具）来绕过这些限制。这只是一种简单的保护措施，不能完全防止用户改变浏览器大小。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值