11-12 元素的属性

函数封装:函数封装是一种函数的功能,它把一个程序员写的一个或者多个功能通过函数、类的方式封装起来,对外只提供一个简单的函数接口。当程序员在写程序的过程中需要执行同样的操作时,程序员(调用者)不需要写同样的函数来调用,直接可以从函数库里面调用

元素的属性:

  

  

Div.attributes 是所有标签属性构成的数据集合

Div.classList 是所有class名构成的数组集合

在classList的原型链上看以看到add()和remove()

1.client系列

  

  (1)  clientWidth/clientHeight 是我们设置的宽和高加上内边距(没有边框)

  clientLeft/clientTop 就是我们设置的边框值

2.Offset系列

   

  offsetWidth/offsetHeight 是我们设置的宽和高加上边框加上内边距

  offsetLeft/offsetTop 是元素外边距离父级的内边距的距离

  这个父级由定位position:absolute;

  offsetTop 参照物由父级元素身上的position:absolute/fixed决定的;如果父级元素没有就逐层向上查找直到body。

  offsetParent  返回这个元素的父级元素

3.Scroll系列

  scrollWidth/scrollHeight 就是我们设置的宽高加上内边距(内容没有溢出的前提下)

  如果超出了范围就按内容而定

  scrollTop/scrollLeft   滚动条卷走的高度和宽度

  如果我们设置了小数,都会向上取整

案例分析

Offset 往往和我们做元素的运动有关

  1. offset必须和position配合使用往往这个值还必须是absolute。
  2. offsetLeft 有初始值 在标准浏览器下是8px  低版本没有。
  1. Document.body 获取的是文档中的body标
  2. Document.documentElement  获取的是文档中根节点
  3. Document.body.clientWidth
  4. Document.documentElement.clientWidth

二者获取的width的值不一样差16px,怎样让他们一样。

一个css就搞定了

Ie6不支持document.documentElement,

兼容性写法:Var w=document.documentElement.clientWidth||document.body.clientWidth获取浏览器可见区的宽度

逻辑运算 ||  &&  !

  || 遇到第一个为真就返回

  && 遇到第一个为假就终止,返回false,如果没遇到就返回最后那一个

  5&&4&&2&&1  ==》1

  5&&0&&3&&0  ==>0

  5||2&&3  且的优先级高于或  2&&3=》3   5||3 ==》5

原文地址:https://www.cnblogs.com/wwwzhaocom/p/10043942.html

时间: 2024-10-18 04:25:42

11-12 元素的属性的相关文章

XStream-->别名;元素转属性;去除集合属性(剥皮);忽略不需要元素

--->清单: City.java Province.java TestXStream.java 4个XStream方法的效果图 javabean-->City.java 1 package xstream; 2 3 public class City { 4 private String name; 5 private String description; 6 7 public String getName() { 8 return name; 9 } 10 public void set

XML 树结构,语法规则,元素,属性,验证及其解析

XML 文档形成了一种树结构,它从"根部"开始,然后扩展到"枝叶". 一个 XML 文档实例 XML 文档使用简单的具有自我描述性的语法: <?xml version="1.0" encoding="UTF-8"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</hea

jQuery入门(2)使用jQuery操作元素的属性与样式

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 一.区分DOM属性和元素属性 对于下面这样一个标签元素: <img id='img' src="images/image.1.jpg" alt='1' class="imgs"></img> 我们通常将id.src.alt.class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性

HTML学习笔记——常用元素及其属性(二)

一.HTML表单 -- form标签 -- 与浏览者交互 1.form 标签 -- 代表HTML表单 form标签是成对出现的,以<form>开始,以</form>结束 属性. common -- 公共属性 action -- 浏览者输入的数据被传送到的地方,比如一个PHP页面(dreamdu.php) action语法: url(网址)/页面?表达式1&表达式2&表达式3&... 表达式语法: 参数名称=参数值 示例: http://www.dreamdu

元素的属性相关操作element.getAttribute(&#39;xxx&#39;),element.setAttribute(&#39;xxx&#39;,&#39;xxx&#39;),element.removeAttribute(&#39;xxx&#39;)

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="demo" class="one" title="鼠标经过">&

MFC DAY10 11 12

一 MFC对话框 1 DoModal函数的执行过程 1.1 查找和加载对话框资源 1.2 将父窗口设置为不可用状态 1.3 创建和显示对话框 1.4 进入对话框的消息循环 1.5 点击OK或者Cancel或者关闭按钮,隐藏对话框窗口 1.6 将父窗口设置为可用的和活动的 1.7 销毁对话框窗口 1.8 释放对话框资源 1.9 返回执行结果(IDOK/IDCANCEL) 二 对话框数据交换技术(DDX) 引入对话框数据交换技术的目的方便的操作控件.将对话框类的 成员变量与对话框的控件绑定,通过操作

jQuery -&gt; 获取/设置/删除DOM元素的属性

Sum square difference Problem 6 The sum of the squares of the first ten natural numbers is, 12 + 22 + ... + 102 = 385 The square of the sum of the first ten natural numbers is, (1 + 2 + ... + 10)2 = 552 = 3025 Hence the difference between the sum of

元素、属性、文本,常见的noedType属性

nodeType属性总共有12种属性值,具有实用价值的主要是3种,分别是: 1.元素节点的nodeType属性值为1. 2.属性节点的nodeType属性值为2. 3.文本节点的nodeType属性值为3. 下面补充下元素.属性.文本的意思: 1.元素:标签的名字就是元素,诸如<body>.<p>和<ul>之类的元素: 2.属性:属性节点用来对元素做出更具体的描述.用过css的我们都知道有id属性.class属性,以及几乎所有元素都有的title属性等. 3.文本:可以

jQuery学习笔记(4)-设置元素的属性和样式

一.前言 本篇主要讲解如何使用jQuery获取和操作元素的属性和css样式 二."DOM属性"与元素属性 1.运行一下代码 <img src="/images/logo_small.gif" class="img_logo" /> 2.分析代码 元素属性src:/images/logo_small.gif 元素属性class:img_logo DOM属性currentSrc:http://localhost/images/logo_s

html5-了解元素的属性

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>了解元素的属性</title></head><body bgcolor="#f0f0f0">    <h1 align="center">静夜思</h1>