js通过查看屏幕大小,更改其他css属性
首先,我们要知道如何得到屏幕的相关数据。
<html>
<head>
<title>获取当前对象大小以及屏幕分辨率等</title>
<body>
<div style=" width:88%;margin:30px auto; color:blue;" id="div_html">
</div>
<script type="text/javascript">
var s = "";
s += " 网页可见区域宽:"+ document.body.clientWidth+"<br />";
s += " 网页可见区域高:"+ document.body.clientHeight+"<br />";
s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"<br />";
s += " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)"+"<br />";
s += " 网页正文全文宽:"+ document.body.scrollWidth+"<br />";
s += " 网页正文全文高:"+ document.body.scrollHeight+"<br />";
s += " 网页被卷去的高(ff):"+ document.body.scrollTop+"<br />";
s += " 网页被卷去的高(ie):"+ document.documentElement.scrollTop+"<br />";
s += " 网页被卷去的左:"+ document.body.scrollLeft+"<br />";
s += " 网页正文部分上:"+ window.screenTop+"<br />";
s += " 网页正文部分左:"+ window.screenLeft+"<br />";
s += " 屏幕分辨率的高:"+ window.screen.height+"<br />";
s += " 屏幕分辨率的宽:"+ window.screen.width+"<br />";
s += " 屏幕可用工作区高度:"+ window.screen.availHeight+"<br />";
s += " 屏幕可用工作区宽度:"+ window.screen.availWidth+"<br />";
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+"<br />";
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"+"<br />";
document.getElementById("div_html").innerHTML = s;
</script>
</body>
</html>
第二步,我们应该要应该js修改css的三种方式。
<body>
<div id="div">这是一个盒子</div>
<script type="text/javascript">
var div = document.getElementById("div");
//第一种:用cssText
div.style.cssText='width:600px;height:250px;border:1px red solid;text-align: center;line-height: 250px;';
//第二种:用setProperty()
div.style.setProperty('width','700px');
div.style.setProperty('height','300px');
div.style.setProperty('line-height','300px');
div.style.setProperty('background','#f00');
div.style.setProperty('color','#fff');
div.style.setProperty('border','1px solid blue');
div.style.setProperty('text-align','center');
//第三种:使用css属性对应的style属性
div.style.width = "800px";
div.style.height = "250px";
div.style.lineHeight = "250px";
div.style.background = "#000";
div.style.color = "#fff";
div.style.border = "1px solid #111";
div.style.textAlign = "center";
</script>
</body>
第三点应该注意,在js改变css的时候,对于得到的变量情况,应该加上“px”
例如:document.getElementById("body_left").style.height = h + "px";
js通过查看屏幕大小,更改其他css属性的更多相关文章
- ioctl函数的使用之查看终端屏幕大小
要想查看一个终端屏幕的大小,可以使用ioctl()函数,步骤如下. 1.首先找到对应终端的文件号,一般在 /dev/pts/....(0,1,2..).具体几号需要自己验证.如在pts目录下使用命 ...
- 如何根据屏幕大小改变class的css样式
/*当屏幕小于1200px*/ @media (max-width:1200px) { ...} 此处针对所有小于1200px屏幕的css属性. /*当屏幕小于1200px且大于992px*/ @me ...
- js 根据屏幕大小调用不同的css文件
原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先,在hea ...
- (转)JS获取当前对象大小以及屏幕分辨率等
原文 JS获取当前对象大小以及屏幕分辨率等 <script type="text/javascript">function getInfo(){ var ...
- JS获取当前对象大小以及屏幕分辨率等...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta nam ...
- js获取屏幕大小
1.js获取屏幕大小 <html> <script> function a(){ document.write( "屏幕分辨率为:"+screen.widt ...
- 【Javascript Demo】JS获取当前对象大小以及屏幕分辨率等
效果如下: 代码如下: <html> <head> <title>获取当前对象大小以及屏幕分辨率等</title> <body> <d ...
- CSS 屏幕大小自适应
要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器: media的使用和规则: ①被链接文档将显示在什么设备上. ②用于为不同的媒介类型规定不同的样式. 语法: @medi ...
- html 网页背景图片根据屏幕大小CSS自动缩放
https://blog.csdn.net/coslay/article/details/47109281 腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码 ...
随机推荐
- React Navigation基本用法
/** * Created by apple on 2018/9/23. */ import React, { Component } from 'react'; import {AppRegistr ...
- linux之时间设置
date 显示与设置系统时间 %Y year %m moth 月 %d day 日期 %H hour 小时 %M minute 分钟 %S sec 秒 +%F ...
- git:distributed is the new centralized-part1
PART 1 梗概 git文件流转有三个工作区域:工作目录(working directory).暂存区域(staging area).本地仓库(repository).文件处于上述三个工作区域的状态 ...
- 模糊查询出list
<resultMap id="shipList" type="com.sinochem.yunlian.yunliantraffic.domain.Ship&quo ...
- 移动终端设备ID
转自:https://wetest.qq.com/lab/view/116.html 一.前言 对于移动端产品的常规统计分析和运营推广,渠道结算来说,能精准的识别区分并且跟踪一台终端设备(一个终端用户 ...
- random模块(随机数)
random.random() #0-1之间的随机数 random.randint(1,10) #1-10 包括10的随机数 --> int random.choice(list) #随机选取列 ...
- Mac 安装Python3 facewap环境
参考网上大神的方法 1 官网下载安装 2 下载指定版本的源码cmake安装 3 Mac上使用homebrew进行安装(强烈推荐,主要是前两种的openssl模块我没有搞定链接什么的一直报错,一个个下载 ...
- js bind0
$(function(){ $("#ul").on('click','li',function(){ if(!$(this).a $(function(){ $("#ul ...
- 记一次Vue中v-model和v-bind区别
由于v-model 只是语法糖, <input v-model="message"> 与下面的两行代码是一致的: <input v-bind:value=&quo ...
- java Boolean和boolean的区别
Boolean b1=new Boolean("false"); Boolean b2=new Boolean("tRue"); Boolean b3=new ...