精华内容
下载资源
问答
  • 通过DOM获取元素样式
    2020-11-23 20:48:03

    一、IE浏览器获取样式

    读取box1当前显示的样式的宽度
          语法:元素.currentStyle.样式名
          他可以用来显示当前元素样式
          只有IE支持这种方式!!!!
    

    二、其他浏览器获取样式

    在其他浏览器中可以使用
        getComputedStyle().样式 
        这个方法来获取当前元素的样式
        这个方法时window的方法 可以直接使用
    需要两个参数
        第一个 要获取样式的元素
        第二个 可以传递一个伪元素 一般都传null
    该方法会返回一个对象,对象中封装了当前元素的对应样式
    可以通过 对象.样式名 来读取样式
    比如获取的样式没有设置,则会获取到真实的值,而不是默认值
    如果没有设置width 则它不会获取到auto 而是一个长度
    
    IE8不支持此方法
    
    通过currentStyle和getComputedStyle()读取到的样式都是只读的
        不能修改 如果要修改必须通过style属性
    

    三、其他样式操作属性

    clientWidth
    clientHeight
         这两个属性可以获取元素的可见宽度和高度
             包括内容区和内边距
         这些属性都是不带px的 返回的都是数字 可以直接进行计算
         这些属性都是只读的不能修改
    offsetWidth
    offsetHeight
        获取元素整个的宽度和高度
            包括内容区和内边距还有边框
    
    
    offsetParent
        获取当前元素的定位父元素
        会获取到离当前元素最近的开启定位的祖先元素
            如果所有祖先元素都没有开启定位 则返回body
    
    
    offsetLeft
        当前元素相对于其定位父元素的水平偏移量
    offsetTop
        当前元素相对于其定位父元素的垂直偏移量
    
    scrollHeight
    scrollWidth
        获取元素整个滚动区域的高度
    scrollLeft
    scrollTop
        获取水平/垂直滚动条滚动的距离
    

    小技巧:

    	  当满足 scrollHeight-scrollTop == clientHeight
    	      说明垂直滚动条滚动到底
    	  当满足 scrollWidth-scrollLeft == clientWidth
    	      说明垂直滚动条滚动到底
    
    更多相关内容
  • JS利用DOM获取或设置元素的样式

    千次阅读 2017-09-16 20:10:56
    1.利用DOM操作行内样式表  1)属性值的获取:元素节点.style.属性名,注意如果是类似于font-size这种属性,需要改为fontSize写法  2)属性值的设置:元素节点.style.属性名 = “值”  2.利用DOM操作内部样式...

    1.利用DOM操作行内样式表

                  1)属性值的获取:元素节点.style.属性名,注意如果是类似于font-size这种属性,需要改为fontSize写法

                  2)属性值的设置:元素节点.style.属性名 = “值”

           2.利用DOM操作内部样式表或外部样式表

                  1)IE浏览器下:元素节点.currentStyle

                  2)谷歌或火狐下:window.getComputedStyle(元素节点,null);

                  3)兼容写法

                       格式1:var  sty  =  元素节点.currentStyle==undefined ? window.getComputedStyle(元素节点,null) : 元素节点.currentStyle

                         格式2:var  sty  = 元素节点.currentStyle|| window.getComputedStyle(元素节点,null);

                  4)注意:外部样式或行内样式在JS下面是无法更改的,如果要更改,可以使用添加行内样式的形式更改,即元素节点.style.属性名 = 属性值;

    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		div{
    			width: 100px;
    			height: 100px;
    			background: blue;
    		}
    	</style>
    </head>
    <body>
    	<div></div>
    	<script type="text/javascript">
    	var div = document.querySelector("div");
    	console.log(div.style.width);  //什么也没有
    	var sty = div.currentStyle || window.getComputedStyle(div,null);
    	console.log(sty.width);   //100px;
    	</script>
    </body>
    </html>


    展开全文
  • 使用DOM操作样式表

    2015-12-10 11:19:47
    javascript样式表分为:内嵌式样式表;内联式样式表;外联式样式表。 操作元素的style样式属性(内嵌式) css样式属性和javascript样式属性对比: Css样式属性 javascript样式属性  background-color ...

    javascript样式表分为:内嵌式样式表;内联式样式表;外联式样式表。

    操作元素的style样式属性(内嵌式)

    css样式属性和javascript样式属性对比:

    Css样式属性 javascript样式属性

      background-color style.backgroundColor

      color style.color

      font style.font

      font-family style.fontFamily

    当属性名有2个单词以上时就要使用驼峰命名。

    如将一个<div />id="div1"CSS边框属性更改为"1px solid red",背景色改为green

    var oDiv document.getElementByIdx_x("div1");

    oDiv.style.border "1px solid red";

    oDiv.style.backgroundColor green;

    DOMstyle提供了几种方法:

    1. getPropertyValue(propertyName) -- 返回CSS属性的属性值的字符串值。

    2. getPropertyPriority() -- 如果CSS属性规则指定了"import",则返回字符串 "!import",否则返回空字符串。

    3. item(index) -- 返回指定索引的CSS属性名称。

    4. removeProperty(propertyName) -- CSS定义中删除propertyName

    5. setProperty(propertyName,value,priority) -- 设置CSS属性propertyNamevalue 以及给定的优先级。

    操作外部样式表及style元素中的样式

    DOM指定了一个样式表对象,该对象如下属性:

    1. disabled -- 指示样式表是否disabled

    2. href -- 外部样式表的URL

    3. media -- media属性中指定的可以使用样式表的媒体类型列表;

    4. ownerNode -- 指定样式表的DOM节点(<link /><style />元素);

    5. parentStyleSheet -- 如果样式表被包含在CSS@import语句中,本属性指向语句 发现的样式;

    6. title -- 通过HTMLtitle属性指定的样式列表;

    7. type -- 样式表的mime类型。

    访问DOM浏览器样式表规则使用cssRules集合;访问IE样式规则使用rules集合。

    如判断使用哪个集合名:

    var oCss document.styleSheets[0].cssRules || document.styleSheets[0].rules;

    操作最终样式(这种只能读)

    IE使用currentStyle对象:如显示iddiv1的颜色

    var oDiv document.getElementByIdx_x("div1");

    alert(oDiv.currentStyle.color);

    DOM使用getComputedStyle(要获取样式表的元素,伪元素):如显示iddiv1的颜色

    var oDiv document.getElementByIdx_x("div1");

    alert(document.defaultView.getComputedStyle(oDiv,null).color);

    展开全文
  • 前端开发者的必备知识宝库 —— JavaScript domAPI整理1. 节点类型2. 原型与原型链3. this 指向问题4. new 关键字做了什么?5. 原生JS如何实现事件委托?6. 手写一个冒泡排序8. 如何一行代码实现数组去重?9. null与...

    • 对一般兼容性和特点做了标识(暖暖的,很贴心~)
    • 包含新出的各类API(简直不要太爽)

    在这里插入图片描述

    1. 节点类型

    节点类型节点值
    标签节点(Element)1
    属性节点(Attr)2
    文本节点(Text)3
    CDATA节点(CDATASetion)4
    实体引用节点(EntityReference)5
    实体节点(Entity)6
    处理指令节点(ProcessingInstruction)7
    注释节点(Comment)8
    文档节点(Document)9
    文档类型节点(DocumentType)10
    文档片段节点(DocumentFragment)11
    DTD声明节点(Notation)12

    2. Node类型

    属性说明
    nodeType节点类型
    nodeName节点名
    nodeValue节点值
    childNodes子节点
    parentNode父节点
    ownerDocument文档节点
    previousSibling上一个节点
    nextSibling下一个节点
    firstChild第一个子节点
    lastChild最后一个子节点
    方法说明
    remove()获取属性值 [ie不支持]
    before()在节点前插入 [兼容性较差]
    after()在节点前插入 [兼容性较差]
    prepend()在第一个子节点前插入 [兼容性较差]
    append()在最后一个子节点后插入 [兼容性较差]

    3. Document类型

    属性说明
    documentElementhtml标签
    headhead标签 [ie9+]
    bodybody标签
    URL当前页url
    referrer来源页url
    domain页面域名
    images所有图片集合
    cookiecookie信息
    title页面标题
    activeElement当前焦点元素
    documentMode文档模式
    readyState文档状态
    doctype文档类型声明
    scripts脚本集合
    formsform标签集合
    children元素类型的子节点集合
    defaultViewdocument关联的window对象
    方法说明
    getElementById()返回对应id的元素
    getElementsByName()返回对应名称元素集合
    getElementsByTagName()返回对应标签名元素集合
    getElementsByClassName()返回指定类名的元素集合 [ie不支持]
    querySelector()返回符合选择器的第一个元素
    querySelectorAll()返回符合选择器的元素集合
    createElement()创建元素节点
    createTextNode()创建文本节点
    createAttribute()创建属性节点
    createComment()创建注释节点
    createDocumentFragment()创建空的 DocumentFragment 对象
    matchesSelector()该选择器是否符合元素匹配 [实现不统一,需要前缀]
    write()文档文本写入 [输出后光标不换行]
    writeIn()文档文本写入 [输出后光标换行]
    implementation.hasFeature(特性,版本)特性监测

    在这里插入图片描述

    4. Element类型

    属性说明
    idid
    className类名
    classList.add(‘类名’)添加指定类名 [ie10+]
    classList.remove(‘类名’)删除指定类名 [ie10+]
    classList.contains(‘类名’)是否包含指定类名 [ie10+]
    classList.toggle(‘类名’)替换指定类名 [ie10+]
    title标题
    style设置或返回元素的样式属性
    children子元素集合
    innerHTML设置或者返回元素的内容
    outerHTML设置或者返回元素的内容 [包含自身]
    textContent设置或返回文本内容 [ie不支持]
    innerText设置或返回文本内容 [ie支持]
    contentEditable设置或返回元素的可编辑状态
    isContentEditable是否可编辑
    childElementCount子元素节点个数
    firstElementChild第一个子元素节点
    lastElementChild最后一个子元素节点
    previousElementSibling上一个元素节点
    nextElementSibling下一个元素节点
    方法说明返回
    focus()设置焦点
    blur()失去焦点
    appendChild(节点)在子节点列表之后插入新增节点
    insertBefore(节点,参照节点)在参照节点之前插入节点插入节点
    insertAdjacentText(位置,节点内容)在指定位置插入文本
    insertAdjacentHTML(位置,节点内容)在指定位置插入html或文本
    removeChild(节点)节点删除被删节点
    replaceChild(节点,被替换的节点)节点替换被替换节点
    cloneNode(布尔值)复制节点克隆节点
    importNode(节点, 布尔值)从A文档中取得a节点,将其导入B文档(类似cloneNode方法)
    contains(节点)该节点是否为调用节点的子级布尔值)
    hasFocus()是否获得了焦点布尔值
    hasChildNodes()是否存在子节点布尔值
    isDefaultNamespace(url)是否指定了名称空间布尔值
    isEqualNode(节点)两个元素是否相等布尔值
    isSupported(特性,版本)是否支持某特性布尔值

    5. attr类型

    属性说明
    name属性名
    value属性值
    isId是否为id类型
    specified属性是否被指定
    length属性长度
    attributes属性集合
    方法说明
    getAttribute()获取属性值
    getAttributeNode()获取属性节点
    setAttribute()设置属性值
    setAttributeNode()设置属性节点
    removeAttribute()删除属性
    removeAttributeNode()删除属性节点 [ie不支持]
    hasAttribute()是否存在指定的属性
    hasAttributes()是否存在属性

    6. Text类型

    方法说明
    appendData(文本)将text添加到节点的末尾
    deleteData(位置,数量)从指定位置开始删除n个字符
    insertData(位置,文本)从指定位置插入文本
    replaceData(位置,数量,文本)用text替换从offset位置开始到offset+count为止处的文本
    splitText(位置)从指定位置将当前文本节点分裂成两个文本节点
    substringData(位置,数量)截取从offset位置开始到offset+count为止处的字符串
    normalize()合并相邻文本节点,并删除空的文本节点

    撑住,快看完了
    在这里插入图片描述

    7. 表格操作

    7.1 table

    属性方法说明
    captioncaption元素指针
    tBodiestbody集合
    tFoottfoot集合
    tHeadthead元素
    rows表格所有行集合
    createTHead()创建
    createTFoot()创建
    createCaption()创建caption元素,将其放到表格中,返回引用
    deleteTHead()删除thead元素
    deleteTFoot()删除tfoot元素
    deleteCaption()删除caption元素
    deleteRow(pos)删除指定位置的行
    insertRow(pos)向行集合中的指定位置插入一行

    7.2 tbody 元素

    属性方法说明
    rowstbody所有行集合
    deleteRow(pos)删除指定位置的行
    insertRow(pos)向行集合中的指定位置插入一行,返回引用

    7.3 tr 元素

    属性方法说明
    cellstr所有单元格集合
    deleteCell(pos)删除指定位置的单元格
    insertCell(pos)向单元格集合中的指定位置插入一个单元格,返回引用

    8. 样式操作

    8.1 访问元素样式

    • DOM样式 —— js通过dom.style只能访问直接样式属性,不能访问嵌入样式表和外部样式表
    属性方法(dom.style)说明
    cssText返回style特性中所有样式的字符串形式
    length返回元素中CSS属性数量
    parentRule返回CSS信息的CSSRule对象
    getPropertyCSSValue(name)返回属性值的CSSValue对象(包含cssText和cssValueType)
    getPropertyPriority(name)是否使用了!important属性
    getPropertyValue(name)返回给定属性的字符串值
    removeProperty(name)从样式中删除给定属性
    setProperty(name,value,优先级)将给定属性设置为相应的值并加上优先级

    8.2 操作样式表

    • document.styleSheets —— 应用于文档的所有样式表
    属性方法(dom.style)说明
    属性(document.styleSheet[n])
    cssRules单个样式表中的所有样式规则 [ie不支持]
    rules同上 [ie支持]
    insertRule(rule,index)向cssRules集合中指定位置插入rule字符串 [ie不支持]
    addRule(rule,index)同上 [ie支持]
    deleteRule(index)删除cssRules集合中指定位置的规则 [ie不支持]
    removeRule(index)同上 [ie支持]

    在这里插入图片描述

    9. 大小和偏移

    属性说明
    offsetParent偏移的父容器
    getBoundingClientRect()获取页面元素实际位置和宽高 (返回属性对象)
    offsetWidth元素宽度 (可视内容区+滚动条+内边距+边框)
    offsetHeight元素高度 (可视内容区+滚动条+内边距+边框)
    offsetLeft与相邻父级的左距离
    offsetTop与相邻父级的上距离
    clientWidth元素宽度 (可视内容区+内边距)
    clientHeight元素高度 (可视内容区+内边距)
    clientLeft内边距边缘与边框边缘的距离 (左边框)
    clientTop内边距边缘与边框边缘的距离 (上边框)
    scrollWidth元素宽度 (可视内容区+滚动内容区+内边距)
    scrollHeight元素高度 (可视内容区+滚动内容区+内边距)
    scrollLeft元素左侧已滚动的距离
    scrollTop元素顶部已滚动的距离

    10. FAQ

    本文内容较多,可能一下子记不住,可以收藏一波,方便日后查阅

    1. 希望本文能对大家有所帮助,如有错误,敬请指出
    2. 原创不易,还请各位客官动动发财的小手支持一波(关注、评论、点赞、收藏)
    3. 拜谢各位,一起加油!!!

    在这里插入图片描述

    展开全文
  • DOM学习笔记(部分)

    2022-04-04 17:12:03
    节点:网页所有内容都是节点(标签,属性,文本,注释等) 元素:网页的标签 属性:标签的属性 api分类 对元素对象的增删改查 对元素属性的增删改查 对元素位置的获取 键盘事件与鼠标事件 ...
  • 取得DOM节点的一些Document对象方法: querySelector() querySelectorAll() getElementById() getElementsByClassName() getElementsByTagName() querySelector:接收一个CSS选择符,返回与盖模式匹配的...
  • 注意: 在文档的距离是不会对元素优先级计算产生影响的.(可以看文档中无视DOM的距离的例子) 优先级顺序下列是一份优先级逐级增加的选择器列表: 通用选择器*元素(类型)选择器选择器属性选择器伪类ID 选择...
  • 以前获取,或改变某个表单的样式,一般... 如果该表单样式外部样式表里,用上面的方法则要报错。这里介绍一个好的方法。document.styleSheets[0].  例如:  var objstyle = document.styleSheets[0].rules;
  • 解析【判断题】IE浏览的内核是Trident。【单选题】插入 Javacript 的正确位置是______ 。【单选题】当请求URL有参数q=010时,以下关于HTTP请求参数说法正确的是______。【单选题】< hr color=red >表示___...
  • DOM样式 行内样式与css样式 var div0 = document.querySelector('#div0'); div0.style.height = '100px'; div0.style.width = '100px' 上面的对象写法,需要将所有的css-字母替换为大写字母 例如 font-size ...
  • DOM 操作表格及样式

    千次阅读 2015-07-29 09:36:12
    学习要点: 1.操作表格 ...章主要了解一下 DOM 操作表格和样式的一些知 识。 一.操作表格 标签是 HTML 结构最为复杂的一个,我们可以通过 DOM 来创建生成它,或 者 HTML DOM 来操作它。(PS:H
  • 知识点:了解jQuery选择器的基本概念及优势、能够使用不同的jQuery选择器选取元素,比如基本选择器、层次选择器、属性选择器、基本过滤选择器、可见性过滤选择器的使用,了解使用jQuery选择器的注意事项。...
  • Bootstrap Table 中文文档(完整翻译版)

    万次阅读 多人点赞 2017-02-22 13:03:09
    默认情况下,表格是有边框的,你可以添加 ‘table-no-bordered’ 来删除表格的边框样式。 sortClass data-sort-class String undefined 被排序的td标签的class名 height data-...
  • DOM系列:动态添加CSS样式规则

    千次阅读 2018-06-26 22:14:34
    在上一节学习了如何通过JavaScript来修改CSS样式。简单地说:查询CSS样式(即计算样式),设置单个样式(设置的是行内样式),设置多个样式(通过类来设置样式)。...
  • Bootstrap Table 中文文档(完整翻译版)(转载)

    万次阅读 多人点赞 2018-04-12 10:07:22
    表格参数:名称标签类型默认描述-data-toggleString‘table’不用写 JavaScript ...默认情况下,表格是有边框的,你可以添加 ‘table-no-bordered’ 来删除表格的边框样式。sortClassdata-sort-classStringundefi...
  • css+css3层叠样式表标签汇总(笔记)

    千次阅读 2021-01-30 08:56:02
    文章目录 CSS属性书写顺序(重点) 一、引入CSS样式表 1.1 行内式(内联样式) 1.2 内部样式表(内嵌样式表) 1.3 外部样式表(外链式) 二、CSS基础选择器 2.1 标签选择器 2.2 类选择器 2.3 类选择器特殊用法- 多类名...
  • 前面我《Python处理超强反爬(TSec防火墙+CSS图片背景偏移定位)》一文讲解如何解析css图片背景偏移的数据,通过图像识别提取文字。 本文将带你解析各种形式自定义字体,绘制点阵图,通过图像识别提取出关系...
  • Selectors Level 3 CSS第三级选择器 文档翻译 规范源地址:https://www.w3.org/TR/2011/REC-css3-selectors-20110929/ 欢迎指正
  • Day02CSS层叠样式表

    千次阅读 2019-12-29 19:03:00
    CSS层叠样式表 回顾 1、HTML概述 Hyper Text Markup Language 超文本标记语言 作用:创建网页文档,包含文字、图片、链接、音频、视频等。 2、HTML的常用基本标签 结构标签: html head title meta body 排版...
  • 直接生命周期函数中获取值为null 方式一:再加个延迟200毫秒的函数获取 方式二:onReady使用(未测试) 1、创建选择器 const query = wx.createSelectorQuery(); 将选择器的选取范围更改为自定义组件...
  • 十四、文档对象模型 原文:The Document Object Model 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解(第 2 版)》 Too bad! Same old story! Once you...
  • 章我们给大家讲解一下什么是css选择器?css35种常见的基本选择器。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一:什么是css选择器? CSS是一种用于屏幕上渲染html,xml等一种语言,...
  • SheetJS中文文档-js导出Excel脚本库

    万次阅读 2021-01-08 11:33:13
    转载自 GITHUB用户rockboom 的翻译文档 SheetJs下载: GITHUB地址 | CSDN下载地址 SheetJS js-xlsx SheetJS是用于多种电子表格格式的解析和编写。通过官方规范、相关文档以及测试文件实现简洁的JS方法。SheetJS...
  • 今天终于开始学前端了,以前一直被其他事给耽误,这一次不会了!哈哈哈! 1、定义CSS的基本语法 定义的基本语法分为两个组成部分,...而且根据选择器的构成形式可以将选择器分为基本选择器和复合选择器。 将CSS...
  • BootstrapTable中文文档

    万次阅读 多人点赞 2019-07-18 17:42:07
    一个jQuery 选择器,指明自定义的toolbar 例如: #toolbar, .toolbar. checkboxHeader data-checkbox-header Boolean true 设置false 将列头隐藏check-all checkbox . ...
  • Bootstrap Table API 中文版(完整翻译文档

    万次阅读 多人点赞 2017-09-11 20:20:27
    >Bootstrap table API 中文文档(完整翻译文档) *$('#table').bootstrapTable({}); *看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽 *最大可能结合尽可能...
  • Document 是window的一个重要属性 document.documentElement 获取DOM节点是html元素 ...document.body 获取DOM节点是body元素。 访问元素的行内样式 任何支持 style 特性的 HTML元素 JavaScript ...
  • {{activity.context}} </el-timeline-item> </el-timeline> </el-dialog> 最终实现效果: Vue篇 如何导入全局样式表 直接 main.js将相关样式导入即可 // 导入全局样式表 import './assets/css/global.css' 如何...
  • DOM Style样式对象的详细用法

    千次阅读 2018-07-09 20:38:44
    DOM Style样式对象的详细用法HTML Style样式比较复杂,相应访问、修改方法也有所差异。参考相关资料,整理如下。典型Html文件如下,有三种定义方式。&lt;head&gt; &lt;style type="text/css"...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,531
精华内容 6,212
关键字:

请利用dom获取本文档中的所有的样式表,并在文档中输出对应样式表的所有选择器、样

友情链接: viterbi.gz