clientHeight和innerheight

innerHeight与clientHeight、innerWidth与clientWidth、scrollLeft与pageXOffset等属性

区分innerHeight与clientHeight.innerWidth与clientWidth.scrollLeft与pageXOffset等属性标签: innerheight clientheight innerwidth clientwidth offsetleft等 window对象: (1)innerHeight属性:窗口中文档显示区域的高度,不包括菜单栏.工具栏等部分.该属性可读可写. IE不支持该属性,IE中body元素的clientHeight属性与该属性相同. (2)inn

[DOM基础]offsetHeight,clientHeight,scrollHeight,innerHeight,outerHeight等属性的解释

由于经常搞混这几个属性,所以查找资料总结一下,方便以后翻出来温习. 一.偏移量-以offset开头的 1.offsetHeight:元素在垂直方向上占用的空间大小,像素.包括元素的高度.可见的水平滚动条的高度.上边框高度和下边框高度. 2.offsetWidth:同上,水平上占用的空间. 3.offsetLeft:元素的左外边框至包含元素的左内边框的距离. 4.offsetTop:同上,上部的距离. 包含元素的引用保存在offsetParent属性中,不一定是parentNode,比如<td>

QQ浏览器等window.innerHeight首次读取的高度不正确的解决办法

问题描述移动端的页面,需要处理首屏为一满屏.并且,采用javascript计算高度来设置容器高度的方案. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=

CuPlayer

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> api for mainbo </title> <style> * { margin

原生JS下拉加载插件分享。

无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",function(data,obj){ // var str = ""; // data.data.forEach(function(item,index){ // str += "<li>" + item.title + "</li>";

javascript中BOM部分基础知识总结

一.什么是BOM BOM(Browser Object Document)即浏览器对象模型. BOM提供了独立于内容而与浏览器窗口进行交互的对象: 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window: BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性: BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分. 二.学习B

php工作笔记6-手机端适应缩放

1.静态页面

CSS魔法堂：不得不说的Containing Block

前言 <CSS魔法堂:重新认识Box Model.IFC.BFC和Collapsing margins>中提到在没有floated兄弟盒子时,line box的左右边框会与所属的containing block的左右content edge相接触.那到底什么是containing block(abbr. CB)呢? containing block在CSS的visual formatting model中十分重要的理论基础,因为盒子的宽/高度自动值/相对值的计算,相对/浮动/绝对定位,均依

Js位置与大小（1）——正确理解和运用与尺寸大小相关的DOM属性

在web开发中,不可避免遇到要计算元素大小以及位置的问题,解决这类问题的方法是利用DOM提供的一些API结合兼容性处理来,所有内容大概分3篇左右的文章的来说明.本文作为第一篇,介绍DOM提供的与尺寸大小相关的DOM属性,提供一些兼容性处理的方法,并结合常见的场景说明如何正确运用这些属性. 1. 正确理解offsetWidth.clientWidth.scrollWidth及相应的height属性假设某一个元素的横纵向滚动条都拖动到最末端,则offsetWidth.clientWidth.scr

原生 js 模拟 alert 弹窗

复制头部的 js 代码到你的 js 文件的任何地方,调用Chef.alert方法传入相应的参数即可并没有什么功能,只是一个提示的作用,可能样式比 alert 的弹窗好看点,css是写在js里的,只要你会写 css 就可以自行修改样式. Chef.alert 使用说明: 此方法有6个参数: 1,title 弹出框的标题 2,content 弹出框的提示文字也可以以字符串的形式传入任何html标签, 3,firm 弹出框按钮的文字 4,offset 弹出框距离顶部的位置,左右默认水平居中, 5,wi

移动端H5---页面适配问题详谈（一）

一.前言昨天唠叨了哈没用的,今天说点有用的把.先说一下响应式布局吧,我一直认为响应式布局的分项目,一下布局简单得项目做响应式还是可以可以得.例如博客.后台管理系统等.但是有些会认为响应式很牛逼,尤其是在不懂前端的人眼中,一味的追求响应式布局,我觉得复杂的布局项目做响应式还不如做二套样式,因为响应式的样式混在一起真的维护起来是恨费劲的.可能我说的不对,但是发表一点点自己的看法.说道这里就想说一下移动端的布局,有很多人就是想把手机端得程序兼容ipad,我就觉得这个很不可思议为什么要这么做得,命名

轻量级的jquery

话不多说,直接上源代码一.tool.js 封装一些共用方法,以及相关的浏览器兼容细节,供Base.js调用 //浏览器检测,一旦加载即执行 (function() { window.sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie ([\d.]+)/)) ? sys.ie = s[]: (s = ua.match(/firefox\/([\d.]+)/)) ? sys.firefox

JavaScript 点击图片放大功能

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>点击图片放大</title> <style type="text/css"> a img{border:0px;} .latentzoom { CURSOR: pointer; outline: none } .latentzoom-image { BORDER

网站分析统计JS源码分享

之前公司做了一个分析云平台,用来跟踪收集海量的用户行为的相关数据,供运营人员实时监控网站访问量,统计PV,UV,独立IP,访问时段,访问时长,热点追踪等多类信息,我用JS写了一个小插件,只需要再页面加载这个js文件即可,供有需要的朋友参考,该插件分为两部分组成,一部分是分析的主JS,另一部分功能是用来提供热点地图绘制信息. /** * 分析主JS,该JS部署时放在页面</boday>标签之前,所有引入的其他JS位置之后 * 该JS文件会自动加载hot.js文件,进行行为追踪,无需配置. *

js、jquery、css使用过程中学到的一些方法技巧

快速查看 1 动态创建script/link/style标签 2 在不适合使用iframe的情况下,让页面像iframe那样能分块滚动 3 鼠标在元素上时显示tip风格的提示信息 1.动态创建script/link/style标签 //动态创建link var link=document.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribut

浅谈h5移动端页面的适配问题

一.前言昨天唠叨了哈没用的,今天说点有用的把.先说一下响应式布局吧,我一直认为响应式布局的分项目,一下布局简单得项目做响应式还是可以可以得.例如博客.后台管理系统等.但是有些会认为响应式很牛逼,尤其是在不懂前端的人眼中,一味的追求响应式布局,我觉得复杂的布局项目做响应式还不如做二套样式,因为响应式的样式混在一起真的维护起来是恨费劲的.可能我说的不对,但是发表一点点自己的看法.说道这里就想说一下移动端的布局,有很多人就是想把手机端得程序兼容ipad,我就觉得这个很不可思议为什么要这么做得,命名

原生javascript满屏上下滚动

使用到一个滚动事件:onmousewheel (不支持火狐浏览器) / DOMMouseScroll (支持火狐浏览器):这篇代码支持ie8以上版本,Firefox,Safari,Chrome. 每个li代表一屏内容,滚动的是div 的滚动条,根据每个li的top值,改变滚动条距离顶部的距离.可以在每个li里添加没一屏想展示给用户的内容. <!DOCTYPE html> <html> <head lang="en"> <meta ch

BOM基础（三）

在我之前关于DOM的文章里,其实已经有提到过事件的概念.在讲事件之前,首先要知道的就是javascript是由事件驱动的.什么叫事件驱动呢?打个比方,比如我们在页面中点击一个按钮,才会跳出一个窗口或者一句话,又或者说,我们鼠标滚轮移动的时候,出现了一些动画之类的,这就是事件驱动.那什么是事件呢?事件本质上来说就是个触发和响应的过程.事件有三部分组成:事件源,事件名和事件处理函数.所谓事件源,就是触发事件的对象,事件名则是触发了什么事件,事件处理函数则是事件触发后索要执行的函数.比如下述代码 bt

从壹开始 [ Nuxt.js ] 之二 || 项目搭建与接口API

前言哈喽大家周一好,今天的内容比较多,主要就是包括:把前端页面的展示页给搭出来,然后调通接口API,可以添加数据,这两天我也一直在开发,本来想一篇一篇的写,发现可能会比较简单,就索性把项目搭建的过程简化,一次写好了,在开发 Nuxt.js 框架的过程中,我发现相比之前还是有些变化的,如果你是读过我第一个前后端分离系列的小伙伴,可能看过我简单说过Nuxt框架的一些知识<Nuxt.js 是什么?>,我发现现在在项目搭建的过程中,已经优化了一些功能,今天就重头搭建一下. 如果你没有看过之前的文章,

jq、js判断元素是否在可视区域内

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body { height: 2000px; position: relative;} .box { position: absolute; z-index: 9; left: 0; top: 1000px; width: 100px; height: 100px; background-color: #f

JS常见兼容性问题

兼容性问题:函数(方法)兼容描述:部分W3C指定的函数,有部分老的浏览器不支持解决: 条件判断,如果有,则使用,添加原型方法,例如 String 的 trim 方法 if(!String.prototype.trim){ String.prototype.trim = function(){ return this.replace(/^\s\s*/,'').replace(/\s\s*$/,'') } } 兼容性问题:浏览器视口.屏幕.页面宽高获取解决: 1. 获得当前页面 HTML文档所

clientHeight和innerheight

热门专题