JS中window对象中的一些基本属性使用

//获取浏览器内部的宽度与高度

//内部宽度

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

//内部高度

var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

x=document.getElementById("demo");

x.innerHTML="浏览器的内部窗口宽度:" + w + ",高度:" + h + "。"x.style.marginTop = h-200+'px';

获取屏幕宽度

screen.availWidth - 可用的屏幕宽度

screen.availHeight - 可用的屏幕高度

该属性返回访问者屏幕的宽度与高度。结果以像素计,减去界面特性,比如窗口任务栏。

document.write("可用宽度:" +screen.availWidth);

输出结果为:可用宽度:1858


//获取浏览器的名称

function getBrowserInfo(){

var agent = navigator.userAgent.toLowerCase() ;

//正则表达式

var regStr_ie = /msie [\d.]+;/gi ;

var regStr_ff = /firefox\/[\d.]+/givar regStr_chrome = /chrome\/[\d.]+/gi ;

var regStr_saf = /safari\/[\d.]+/gi ;

//判别浏览器

//IEif(agent.indexOf("msie") > 0){return agent.match(regStr_ie) ;}

//firefoxif(agent.indexOf("firefox") > 0){return agent.match(regStr_ff);}

//Chromeif(agent.indexOf("chrome") > 0){return agent.match(regStr_chrome);}

//Safariif(agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0){return agent.match(regStr_saf);}

}

alert(getBrowserInfo());  //弹出浏览器名称

//该方法无法获取的浏览器的名称,能获取版本号

var browser =  navigator.appName;

var b_version = navigator.appVersion;version = parseFloat(b_version);

document.write('浏览器名称:'+browser+'');

document.write("浏览器版本:"+version+'');

document.write("浏览器版本:"+b_version+'');

// 正则表达式的简单使用

//创建的简单匹配规则:查找包含[a,b,c,d]中任意的字母

var par = new RegExp('[abcd]');

//par.test("hello world")将查找的结果返回,若是包含字母,a,b,c,d中任意一个则返回true,否则则返回false

alert(par.test("hello world!"));

//将查找到的字母返回

document.write(par.exec("Helloworld"));

//在状态栏添加信息,浏览器的安全保护一般默认禁止使用该项功能,防止网站钓鱼

window.status = 'put you message here';

//JS修改结点位置

function changeMargin(){

document.getElementById("p1").style.marginLeft="32px";

}

//获取浏览器信息

var browser=navigator.userAgent.toLowerCase() ;

var b_version=navigator.appVersion;var version=parseFloat(b_version);

document.write("浏览器名称:"+ browser)

document.write("浏览器版本:"+ version)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,381评论 0 5
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,816评论 0 8
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,591评论 0 25
  • 常见试题 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-h...
    他大舅啊阅读 2,509评论 1 5
  • 头痛欲裂,缺了午觉的孩子表示各种难受!不知道从什么时候开始,午觉成了必做的项目。曾经,年轻有活力,每天都打足鸡血,...
    静静地简书阅读 174评论 0 0