首页 / JAVASCRIPT / js获取浏览器基本信息大全

js获取浏览器基本信息大全

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js获取浏览器基本信息大全，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4238字，纯文字阅读大概需要7分钟。

内容图文

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE，FireFox 差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

－－－－－－－－－－－－－－－－－－－

技术要点

本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在 IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

关于获取各种浏览器可见窗口大小的一点点研究。

在我本地测试当中：在IE、FireFox、Opera下都可以使用

document.body.clientWidth

document.body.clientHeight即可获得，很简单，很方便。

而在公司项目当中：Opera仍然使用

document.body.clientWidth

document.body.clientHeight

可是IE和FireFox则使用

document.documentElement.clientWidth

document.documentElement.clientHeight

原来是W3C的标准在作怪啊http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果在页面中添加这行标记的话

在IE中：document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

在FireFox中：document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度?

在Opera中： document.body.clientWidth ==> 可见区域宽度

document.body.clientHeight ==> 可见区域高度

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

而如果没有定义W3C的标准，

则IE为：document.documentElement.clientWidth ==> 0

document.documentElement.clientHeight ==> 0

FireFox为:document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

Opera为：document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

真是一件麻烦事情，其实就前端设计开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。但是跟不上潮流就永远做不了一个高级设计师，所以这些知识我们还是必须要理解和熟练掌握的。

内容总结

以上是互联网集市为您收集整理的js获取浏览器基本信息大全全部内容，希望文章能够帮你解决js获取浏览器基本信息大全所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/360639.html

来源：【匿名】

【上一篇】20个实用的JavaScript技巧分享【下一篇】javascript 怎么调用php方法

更多 ►

【js获取浏览器基本信息大全】教程文章相关的互联网学习教程文章

javascript获取用户按了哪个键【代码】

浏览器好像不允许js获取F5这个键的按下事件，应该屏蔽了，这个键太过特殊，猜测可能是，防止用户失去对浏览器的控制？<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><meta charset="utf-8" /> </head> <body onkeypress="checkKey(event)">dsfsdfasdfasdfa<script type="text/javascript">function checkKey(event) {keynum = window.event ? event.keyCode...

javascript正则获取a标签的href【代码】【图】

js正则获取a标签的hreflet str = ‘<a href="https://www.test.com" >test</a>‘ let reg = /((\w+):\/\/)?([\w.]+[.]{1})[\w]+/ console.log(str.match(reg)[0]) 原文：https://www.cnblogs.com/lizhaoyao/p/14888802.html

用Javascript获取页面元素的位置【图】

作者：阮一峰日期： 2009年9月14日制作网页的过程中，你有时候需要知道某个元素在网页上的确切位置。下面的教程总结了Javascript在网页定位方面的相关知识。一、网页的大小和浏览器窗口的大小首先，要明确两个基本概念。一张网页的全部面积，就是它的大小。通常情况下，网页的大小由内容和CSS样式表决定。浏览器窗口的大小，则是指在浏览器窗口中看到的那部分网页面积，又叫做viewport（视口）。很显然，如果网页的内容能够在浏览...

javascript 行间样式与非行间样式获取方法【代码】

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style type="text/css">.style001 {width: 300px;height: 300px;margin: 20px;padding: 30px;border: 20px grey solid;background-color: lightgray;display: inline-block;}</style><script type="text/javascript">window.onload =function(){var oDiv1 = document.getElementsByClassName(‘style001‘)[0];var oDiv2 = document.getElementsByCla...

JavaScript获取鼠拖动选中的内容（InMemories笔记）【代码】【图】

在前端开发的时候有时候会遇到一种需求：在一段文本中获取选中的一段文字。如下：怎么获取选择的文字呢？ getSelection()方法window对象有一个getSelection()方法，他会返回一个Selection对象。从这个对象中储存了拖动鼠标选择文本的一些信息。比如：用户选择的文本范围、插入符号的位置等。举个例子：<!DOCTYPE html> <html><head><meta charset="utf-8"><title>测试</title></head><body><p>getSelection()方法可以返回一个Selec...

【用jQuery来判断浏览器的类型】及【javascript获取用户ip地址】【代码】【图】

$.browser.[‘浏览器关键字‘]//谷歌浏览器、360浏览器等其他一些浏览器，没有专门的判断 function appInfo() {var bro = $.browser;var binfo = "";if (bro.msie) {binfo = "Microsoft Internet Explorer " + bro.version; // bro.version 获得的是浏览器版本}else if (bro.mozilla) {binfo = "Mozilla Firefox " + bro.version;}else if (bro.safari) {binfo = "Apple Safari " + bro.version;}else if (bro.opera) {binfo =...

javascript获取上传图片的大小

javascript获取上传图片的大小<pre><input id="file" type="file"> <input id="Button1" type="button" value="button" onclick="check()"> <script> window.check=function(){ var input = document.getElementById("file"); if(input.files){ //读取图片数据 var f = input.files[0]; var reader = new FileReader(); reader.onload = function (e) { var data = e.target.result; ...

JavaScript 验证表单不为空和获取select下拉列表的值和文本

1.验证表单不为空var hasform = { "Name": "名字", "Id_card": "身份证", "PaySalary": "月工资", "CardCode": "账号", "Fk_Subjectf_Code": "功能科目", "Birthday": "出生日期", "Start_Date": "开始时间" }; var result = true; var value; for (var k in hasform ) { value = $("#" + k).val(); if ...

如何利用javascript获取表单中select下拉列表中所选中项的值value【代码】

?11.html代码如下：<html> <head> </head> <body> <form name="form1" id="form1"> Select your favorite fruit: <select id="mySelect" name="mySelect"> <option value="11">Apple</option> <option value="22" >Orange</option> <option value="33">Pineapple</option> <option value="44">Banana</option> </select> <br /><br /> <input type="button" onclick="getIndex()" value="Alert index of selected option"> </form>...

Js获取下拉框的值和文本select

$("#camera").change(function () { var obj = this; $("#camera_Name").val($("#camera option:selected").text()); $("#camera_Naming").val($(obj).val()); }); $("#teams option:selected").each(function () { t+=($(this).text()+",") });文本 $("#teams）.val() 值原文：http://www.cnblogs.com/change4now/p/5665155.html

获取下周一日期javascript

var Stamp; Stamp = new Date(); var num = 7-Stamp.getDay()+1; Stamp.setDate(Stamp.getDate() + num); var year = Stamp.getFullYear(); //获取完整的年份(4位,1970-????) var month = Stamp.getMonth() +1; //获取当前月份(0-11,0代表1月) var mvar =‘‘; if(month<10){ mvar = ‘0‘ + month; }else{ mvar = month+‘‘; } var day = Stamp.getDate(); var dvar =‘...

再谈javascript 获取服务器控件值的

从网上搜索了好多资料，折腾了半天，终于搞定，记下来供大家参考这个是网上找到的 <script language="javascript"> function getvalue() { var b = document.all.rbtid.length var a = document.getElementById("rbtid").rows.length; //alert(b);结果为5 //alert(a);结果为4 //for(var i=0;i<b-1;i++)这样也行 for (var i...

【JavaScript与JQuery获取H2的内容】【代码】

撰写日期：2016-7-13 11:05:07JavaScript与JQuery获取DOM内容是有区别的，接下来看一例子栗子：Jquery-获取H3中的内容然后Dom转换为Jquery<!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><title>1-4</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!-- 引入 jQuer...

javascript获取json对象键名及值

碰到一个问题，就是遇到{"1",:"a"},{"2","b"}这种json对象，键名不固定，然后就不知道怎么取了，监视器下面是个object，没有什么属性方法。第一次碰json,自己试着用索引[0],[1]分别获取，失败了。后来在网上找到答案d = {‘1‘: ‘a‘, ‘2‘: ‘b‘}for(i in d){ i 就是键，d[i]就是值} 原文：https://www.cnblogs.com/cqLynnLee/p/10962142.html

每天一个JavaScript实例-展示设置和获取CSS样式设置

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-展示设置和获取CSS样式设置</title> <style>#date{width:200px;background-color:lime;} </style> <script> function getStyle(date,cssprop,cssprop2){//IEif(date.currentStyle){return date.currentStyle[cssprop];}else if(document.defaultView && document.defaultView.getComputedSty...

首页 / JAVASCRIPT / js获取浏览器基本信息大全

js获取浏览器基本信息大全

内容导读

内容图文

内容总结

内容备注

内容手机端

【js获取浏览器基本信息大全】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程