CSS-DOM操作

1.css()

$(‘p‘).css(‘color‘);//获取<p>元素的字体颜色

$(‘p‘).css(‘color‘,‘red‘);//设置<p>元素的字体颜色为红色

$(‘p‘).css({‘font-size‘:‘30px‘,‘color‘:‘red‘});//设置<p>元素多个样式属性



2.offset()

获取元素在当前视图的相对偏移,返回对象包含俩个属性,即top和left,只对可见元素生效

var $p=$(‘p‘).offset();//获取<p>元素的offset()

var left=$p.left;//获取左偏移

var top=$p.top;//获取右偏移



3.position()

获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,返回对象包含俩个属性,即top和left

var $p=$(‘p‘).position();//获取<p>元素的position()

var left=$p.left;//获取左偏移

var top=$p.top;//获取右偏移



4.scrollTop()和scrollLeft()

分别获取元素的滚动条距顶端的距离和距左侧的距离。

var $p=$(‘p‘);

var scrollTop=$p.scrollTop();//获取元素的滚动条距顶端的距离

var scrollLeft=$p.scrollLeft();//获取元素的滚动条距左侧的距离

$(‘textarea‘).scrollTop(300);//元素的垂直滚动条滚动到指定的位置

$(‘textarea‘).scrollLeft(300);//元素的横向滚动条滚动到指定的位置

时间: 2024-10-13 00:44:52

CSS-DOM操作的相关文章

JQuery学习笔记-JQuery的CSS DOM操作

<!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> <meta http-equiv="Content-

Js DOM 操作

HTML DOM对标签属性的操作 1.获取属性值 对象.getAttribute("属性名") 对象.属性名 2.设置属性 对象.setAttribute("属性名","属性值") 对象.属性名 = "属性值" 3.删除属性 对象.remove("属性名") 对象.属性 = "" ? 以上操作不包含对class的操作 如果要对class进行操作 那么class需要写成className

dom core,html dom,css dom,jquery 中的dom操作

前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名")/attr("属性名"))获取属性值, html dom一般利用属性的形式(element.属性名)获取对应属性值,形式相对简洁.此外,针对于css相关的对象,还有css dom 前端开发中的节点有三种:元素节点:文本节点和属性节点 js一般对于dom core和html dom都支

DOM 操作成本究竟有多高,HTML、CSS构建过程 ,从什么方向出发避免重绘重排)

前言: 2019年!我准备好了 正文:从我接触前端到现在,一直听到的一句话:操作DOM的成本很高,不要轻易去操作DOM.尤其是React.vue等MV*框架的出现,数据驱动视图的模式越发深入人心,jQuery时代提供的强大便利地操作DOM的API在前端工程里用的越来越少.刨根问底,这里说的成本,到底高在哪儿呢? 什么是DOM Document Object Model 文档对象模型 什么是DOM?可能很多人第一反应就是div.p.span等html标签(至少我是),但要知道,DOM是Model,

jquery中的DOM操作

DOM操作分为:DOM核心.HTML-DOM.CSS-DOM 1.节点操作 查找 查找元素节点:jquery选择器 查找属性节点:attr("")方法,参数为要查询的属性的名字 创建 创建元素节点:$("html")方法,参数为HTML标记字符串,如:<p></p> 注意:(1)动态创建的新元素节点不会被自动添加到文档中,需要用其他方法插入文档中(2)创建元素时注意标签闭合,可以用$("<p></p>&quo

认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

(一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQuery的优势 1)可以像CSS一样访问和操作DOM 2)修改CSS控制页面外观 3)简化JS代码操作 4)事件代理更加容易 5)动画效果使用方便 6) Ajax技术更加完美 7)大量的基于Jquery的插件 8)可以自定义扩展功能插件 (三)JQuery的语法 格式:$(selector).actio

zBase --轻量级DOM操作库

项目地址:ZengTianShengZ-github zBase-1.2.0 --v3 修复部分bug,添加AMD规范测试 zBase-1.1.0 --v2 对 v1 版本做了升级,优化DOM查找,简化API,提高代码可读性,支持模块化 支持 AMD & CommonJS zBase-1.0.0 --v1 没有任何依赖 轻量级的Dom操作库,封装一些常用的css选择器和事件操作等 Quick start $ npm install $ gulp scripts 使用npm安装 zBase: $

JQuery基本知识、选择器、事件、DOM操作、动画

1:基本选择器 <title></title> <script src="js/jquery-1.7.2.min.js"></script> </head> <body> <form id="form1" runat="server"> <div id="div1"> <a>aaaaa</a> <%--

jQuery学习之路(2)-DOM操作

▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看看DOM操作都有哪些 逐一来看 先写一份HTML代码,后面的代码将操作这份HTML代码 <p title="选择你最喜欢的水果">你最喜欢的水果?</p> <ul> <li title="苹果">苹果</li>

为什么说DOM操作很慢

原文转自:http://kb.cnblogs.com/page/534571/ 一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来. 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局(layout)和绘制(paint).下面主要先介绍下这些浏览器行为,阐述一个页面是怎么最终被呈现出来的,另外还会从代码的角度,来说明一些不好的实践以及一些优化方案