JavaScript和jQuery对CSS的操作对比

1、获取标签对象

document.getElementById("divContent")  ----   $("#divContent")   //获取Id标签对象

  

 

网页可见区域宽: document.body.clientWidth
网页可见区域高:
document.body.clientHeight
网页可见区域宽:
document.body.offsetWidth (包括边线的宽)
网页可见区域高:
document.body.offsetHeight (包括边线的高)
网页正文全文宽:
document.body.scrollWidth
网页正文全文高:
document.body.scrollHeight
网页被卷去的高:
document.body.scrollTop
网页被卷去的左:
document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度:
window.screen.availHeight

屏幕可用工作区宽度: window.screen.availWidth

jquery

获取浏览器显示区域的高度 : $(window).height(); 
获取浏览器显示区域的宽度 :$(window).width(); 
获取页面的文档高度 :$(document).height(); 
获取页面的文档宽度 :$(document).width();

获取滚动条到顶部的垂直高度 :$(document).scrollTop(); 
获取滚动条到左边的垂直宽度 :$(document).scrollLeft();

计算元素位置和偏移量 
offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。 
offset(options, results) 
options.relativeTo  指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。 
options.scroll  是否把 滚动条计算在内,默认TRUE 
options.padding  是否把padding计算在内,默认false 
options.margin   是否把margin计算在内,默认true 
options.border  是否把边框计算在内,默认true

时间: 2024-10-08 13:46:46

JavaScript和jQuery对CSS的操作对比的相关文章

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-

JavaScript 和 jQuery $.alert alert $.confirm confirm 的对比

JavaScript 和 jQuery  弹窗对比 javascript 的三种弹框对象隶属于window对象,并且都会阻塞当前事件和脚本,直到用户操作完成才会继续执行后续事件和脚本.不能使用html元素. jQuery(jquery-confirm插件) jQuery的弹出窗口是通过html元素和一些js事件模拟出来的,隶属于document对象,而且不能够阻塞其他的事件和脚本执行. 例: jQuery 脚本 脚本1: var $confirm= $.confirm('是否继续?');  //

一、jQuery的ready与javascript中的onload加载时间对比

<script type="text/javascript"> var strtime = new Date().getTime(); $(function(){ var end1 = new Date().getTime(); var t1 = end1 - strtime; $("body").append("<p>jquery加载时间为: "+t1+"秒</p>"); }) funct

JQuery 之CSS操作

JQuery 之CSS操作 设置 <p> 元素的颜色: 将所有段落的颜色设为红色 $(".btn1").click(function(){ $("p").css("color","red"); }); 设置多个 CSS 属性/值对 $(selector).css({property:value, property:value, ...}) 把"名/值对"对象设置为所有匹配元素的样式属性. 这是一

原生javascript 实现jQuery代码效果对比

以下是jQuery和JavaScript实现相同操作的等价代码. 选择元素 Javascript代码 // jQuery var els = $('.el'); // 原生方法 var els = document.querySelectorAll('.el'); // 函数法 var $ = function (el) { return document.querySelectorAll(el); } var els = $('.el'); // 或者使用regex-based micro-s

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都支

JavaScript之jQuery-6 jQuery 类数组的操作

一.jQuery 类数组的操作 类数组简介 - jQuery 对象封装的多个 DOM 对象 - 类: 指的是类似 - 具备自己特有的操作方法 类数组的操作 - length属性 - each(fn)遍历类数组,fn用来处理DOM对象.在fn中this表示正在被遍历的那个DOM对象.fn函数正在被遍历的那个DOM对象.fn函数可以添加一个参数i用于表示正在被遍历的DOM对象的下标(从0开始) - eq(index):将下标等于index的DOM对象取出来 - get(): 返回一个DOM对象组成的

“checkbox”和“select”对象在javascript和jquery的操作差异做了整理

checkbox checkbox在javascript和jquery中选中和取消的方法 Javascript: document.getElementById("myCheck").checked=true document.getElementById("myCheck").checked=false Jquery: $("#myCheck").attr("checked","checked"); $(

JavaScript库——jQuery

导入jQuery库 1.直接连接网上的 https://code.jquery.com/jquery/+版本号 2.也可到官网下载jquery库到本地 JavaScript 库作用及对比 为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器 当前流行的 JavaScript 库有: jQuery 是继 Prototype 之