使用jQuery的".css()"和".attr()"方法设置元素"left"属性的注意点
今天在使用jQuery方法".css()"设置"ajax-loader.gif"的位置时出了点小状况,关键代码如下(为了简化,这里假定要给"ajax-loader.gif"设置的左边距离固定为"300px"):
$('#svgLoading').css("left", "300px");
这时,"ajax-loader.gif"图片的位置并没有生效! WHY?
很容易地想到另外一种实现方式:
$('#svgLoading').attr("style", "left:300px;");
binggo, 正确!
WHY?难道".css()"和".attr()"在设置"style"中的属性时不能等价?自然地,百度, 加google...结果都类似地解释——"css设置style里的样式,attr设置属性"...
最终发现了问题所在:
tip1. 使用".css()"设置style里的样式时,如果是"长度"值,则默认的单位为"px",所以不需要,也不能显式地指明单位,否则,设置的样式就会不起作用!
tip2. 使用".attr()"设置style里的样式时,如果是"长度"值,则需要,也必须要指明单位,否则,也同样失效!
小结:
error:
$('#svgLoading').css("left", "300px");
$('#svgLoading').attr("style", "left:300;");
right:
$('#svgLoading').css("left", );
$('#svgLoading').attr("style", "left:300px;");
使用jQuery的".css()"和".attr()"方法设置元素"left"属性的注意点的更多相关文章
- jquery 实践操作:attr()方法
此篇要记录的是 关于 jquery 的 attr() 方法 在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中 ...
- jquery操作css样式的方法
jquery操作css样式的方法(设置和获取)
- php 与 jquery中$.post()与attr()方法的简单实例 amaze modal 模态窗口
$(selector).attr(attribute,value)$.post() 在jqery中有这样一个方法,$.post()下面就这个方法做一个简单的实例: jQuery.post( url, ...
- CSS()方法设置元素样式
使用CSS()方法可以直接设置元素的样式,方法为:css(name,value) $(p).css("font-weight", "bold"); // ...
- jQuery使用之(二)设置元素的样式
css是页面不能分隔的部分,jQuery中也提供了一些css相关的实用的办法.前面章节中有使用过 addClass()为元素添加css样式风格.本节主要介绍jQuery如何设置页面的样式风格.包括添加 ...
- jQuery学习笔记(4)-设置元素的属性和样式
一.前言 本篇主要讲解如何使用jQuery获取和操作元素的属性和css样式 二."DOM属性"与元素属性 1.运行一下代码 <img src="/images/lo ...
- 从零开始学 Web 之 jQuery(二)获取和操作元素的属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- js | javascript获取和设置元素的属性
获取和设置元素的内容: var nv = document.getElementById("pid"); alert(nv.innerHTML); nv.innerHTML=&qu ...
- 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构(节点树)。
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...
随机推荐
- python 手动安装模块
python中 openpyxl是解析 excel 文件的模块,一般使用pip install openpyxl 就可以安装. 但是如果处于公司内网时是无法连网安装的,下面就手动安装进行说明: 1.h ...
- javaweb学习——session和Cookie实现购物车功能
1.创建Book类,实现对图书信息的封装. package cn.it.sessionDemo.example1; import java.io.Serializable; /** * 该类实现对图书 ...
- 题解 P1884 【[USACO12FEB]过度种植(银)Overplanting 】
什么,扫描线需要线段树? 那我第一个不干啊(其实是不会写) 这里介绍一种裸的扫描线: 我们根据x排序,对于相等的 \(x\) ,将 \(y\) 进入和退出分类讨论,然后全部放进set里面.每次 \(x ...
- [Scoi2016]背单词(trie+贪心)
题意:重新解释一下题意吧(题意晦涩难懂) 给定n个单词,你可以按照顺序学习,当学习这一单词时,这个单词是第x个要学习的单词,需要的代价分三类: 1.若存在其他单词是其后缀没被学习,则代价为n2 2.若 ...
- Linux轻量级自动化运维工具— Ansible
Ansible 是什么 ? ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配 ...
- LFW Face Database下载
http://vis-www.cs.umass.edu/lfw/ Download the database: All images as gzipped tar file (173MB, md5su ...
- QLIKVIEW-SALESORDER\DELIVERYNOTICE\OUTSTOCK\INVOICE
//销售订单SALESORDER_TMP:NoConcatenateLOAD T_SAL_ORDER.LE_ID, [T_SAL_ORDER.LCY CODE], T_SAL_ORDER.SYSTEM ...
- mysql安装(centos7)
1.下载rpm wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm 2.安装rpm yum ...
- Kattis - intersectingrectangles 扫描线+线段树
题目:https://open.kattis.com/problems/intersectingrectangles 题意::给你n个矩形,每一个矩形给你这个矩形的左下角的坐标和右上角的坐标,然后问你 ...
- Educational Codeforces Round 68 差G
Educational Codeforces Round 68 E 题意:有 n 个线段,每个都是平行 x 或者 y 轴,只有互相垂直的两线段才会相交.问形成了多少个矩形. \(n \le 5000, ...