所谓CSS-DOM操作就是读取和设置style对象的各种属性，style属性很强大，但是美中不足的是无法通过它来提取到通过外部CSS设置的样式信息，然而在家jQuery中，这些就可以通过css()方法实现了。

和之前一样，在开始前，我们先在html中写出接下来操作要用到的DOM结构树：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript" src="jquery-3.2.1.js"></script>

    <style type="text/css">

       #Id1{width:200px;height:100px;border:1px solid red;color:red;}

       #Id2{width:200px;height:100px;margin:50px;padding:20px;border:1px solid red;}

    </style>

</head>

<body>

   <div id="Id1">我是第一个DIV,我的id是Id1</div>

   <div id="Id2" style="color:#00ffff;">我是第二个DIV,我的id是Id2</div>

</body>

</html>

css()

通过css()方法，我们既可以获取外部CSS导入的样式，也能获取html内联样式。

<script>

      var color1 = $("#Id1").css("color");

      var color2 = $("#Id2").css("color");

      console.log(color1);

      console.log(color2);

</script>

也可以直接使用css()方法设置某个元素的的样式。

<script>

      $("#Id1").css("color","#000");

      $("#Id2").css({fontSize:"24px","backgroundColor":"#888","font-weight":"bold"});

</script>

 

从上面的例子中可以看出，css()即可以设置单个样式，也可以同时设置多个样式属性，需要注意的是，在css()方法中，如果属性中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就需要用驼峰式写法，如果带上了引号，既可以使用驼峰式，也可以使用带“-”的方式，但是，为了养成良好的习惯，自然是带上引号比较好了。

宽度和高度

通过对css()方法的学习，我们知道，可以使用该方法获取和设置元素的宽高。

<script>

      var width = $("#Id1").css("width");

      var height = $("#Id2").css("height");

      console.log(width);

      console.log(height);

</script>

除此之外，在jQuery中，还有另外一种方法也可以获取元素的宽高，那就是width()和height()，这两个方法的作用是获取匹配元素当前计算的高度值，也就是说，css()获取的宽高与样式设置有关，可能会得到“auto”，也可能是“100px”这样的字符串，而width()和height()获取的宽高则是元素在页面中的实际宽高，与样式的设置无关，并且不带单位。

 <script>

      var width = $("#Id1").width();

      var height = $("#Id2").height();

      console.log(width);

      console.log(height);

   </script>

既然可以不带参数获取值，自然就可以传参数设置值了，用这两个方法设置宽高时，如果传递的值是一个数字，则默认单位为px，如果要用其他单位，则必须传递一个字符串。

在盒子模型中，元素的宽高有三种，分别是content-box、padding-box、border-box里的三种宽高，

可以分别对应于jQuery中height()/width()、innerHeight()/innerWidth()和outerHeight()/outerWidth()。
<script>

        console.log($('#Id2').height());

        console.log($('#Id2').innerHeight());

        console.log($('#Id2').outerHeight());

</script>

除了上面的方法外，jQuery中还有以下几个常用的方法。

offset()

offset()方法能够获取和设置元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，还方法只对可见元素有效。

<script>

      newPos=new Object();

      newPos.left="";

    　newPos.top="";

      $("#Id1").offset(newPos);

     console.log($('#Id2').offset().left)；

</script>

position()

position()的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，它的返回对象也是包括top和left两个属性。

<script>

   console.log($('#Id2').offset().left);

   console.log($('#Id2').offset().top);

</script>

scrollTop()和scrollLeft()

这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。当传入参数是，就是控制元素的滚动条滚动到指定位置。

CSS-DOM操作的更多相关文章

  1. jquery学习笔记---Dom操作

    一.DOM操作的分类 DOM(document object model)是一种与浏览器.平台.语言无关的接口,使用该接口可以访问页面中的·所有组件.DOM的操作可以分为DOM Core.HTML-D ...

  2. jQuery中的DOM操作《思维导图》

    首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...

  3. （七）jQuery中的DOM操作

    一.jQuery的DOM操作 (1)查找节点: 查找元素节点: 1. 获取指定的标签节点 $(“上级标签 标签:eq(“标签索引”) ;  如:var li = $("ul li:eq(2) ...

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

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  5. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

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

    前言: 2019年!我准备好了 正文:从我接触前端到现在,一直听到的一句话:操作DOM的成本很高,不要轻易去操作DOM.尤其是React.vue等MV*框架的出现,数据驱动视图的模式越发深入人心,jQ ...

  7. 第三天：DOM操作css

    基本语法: 引用样式时是在head中,用link,另外需要<div>才能显示 修改样式:按下按钮后,引用的样式部分,颜色变为蓝色 如图下图是更改了样式中hello的颜色 代码如下: < ...

  8. jQuery学习之路（2）-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

  9. jQuery系列：DOM操作

    1. 访问元素 在访问页面时,需要与页面中的元素进行交互式的操作.在操作中,元素的访问主要包括对元素属性.内容.值.CSS的操作. 1.1 元素属性操作 1.1.1 设置或返回被选元素的属性值 语法格 ...

  10. 从DOM操作看Vue&React的前端组件化，顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

随机推荐

  1. servlet基础（组成与生命周期）

    servlet基础作用:servlet是运行在Web服务器或应用服务器上的程序:担当web浏览器或其他HTTP客户程序发出的请求与HTTP服务器上的数据库或应用程序之间的中间层.1.读取客户程序发送的 ...

  2. ASIHTTPRequest类库简介和使用说明(转）

    ASIHTTPRequest类库简介和使用说明 官方网站: http://allseeing-i.com/ASIHTTPRequest/ .可以从上面下载到最新源码,以及获取到相关的资料. 使用iOS ...

  3. 辞树的QAQ水题（字符串统计，思维）

    思路:统计一串字符有多少个'A',并分别统计出每个'A'前后有多少'Q'.然后让每个'A'前后的'Q'相乘并相加就能得出结果了. 注意:数据的类型,卡了int,要用long long. 还有就是在pc ...

  4. HDU2037：今年暑假不AC

    Problem Description "今年暑假不AC?" "是的." "那你干什么呢?" "看世界杯呀,笨蛋!" & ...

  5. .Net Core：部署应用

    实战Asp.Net Core:部署应用   1.前言 某一刻,你已经把 .Net Core 的程序写好了.接下来,还可以做什么呢?那就是部署了. 作为一名开发工程师,如果不会部署自己开发的应用,那么这 ...

  6. WinFrom调试时，弹出你正在调试发布的版本

    把下图这里改成DEBUG就好 还有项目属性里面也要改一下 问题解决!

  7. cuda+ffmpeg+opengl解码rtsp h264码流多路

    Cuda 解码 全尺寸 解码 .全尺寸窗口绘制测试( 分别 测试 视频 文件和 IP 相机 实时视频 ) 1080 p 视屏 文件 全尺寸 解码 全尺寸 显示 72 0p IP 相机 全尺寸 解码 全 ...

  8. test20181004 排列

    题意 分析 容斥公式的意义 选了原图中\(x(x \geq i)\)条边的方案,重复了\(\binom{x}{i}\)次. 有多加多减,所以就是那个式子. 具体而言,对选了x条原图中的边的方案,总共加 ...

  9. test20180921 量子纠缠

    题意 问题描述 万能的红太阳J 君正在研究量子信息的纠缠. 具体来说,J 君有一个初始为空的信息集.她会进行m 次操作,有时,她会向信息集内加入一个长度不超过L 的的数字串(一个数字串为一个仅由0 到 ...

  10. python表单验证封装

    在Web程序中往往包含大量的表单验证的工作,如:判断输入是否为空,是否符合规则. <!DOCTYPE html><html><head lang="en&quo ...