（转）jquery基础教程四(css的操作之css,height和width)

最新推荐文章于 2024-09-11 15:33:18 发布
最新推荐文章于 2024-09-11 15:33:18 发布
阅读量606 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/mzoylee/archive/2008/12/20/1359015.html
版权

上面我们学习了jquery 的 addClass和removeClass方法

下面我们来看看 css,height和width
首先我们看看 css(key, value) 和 css(name)

css(key, value)

在所有匹配的元素中，设置一个样式属性的值。

css(name)

访问第一个匹配元素的样式属性。使用这个方法可以很容易地取得第一个匹配元素的样式属性的值。

css(properties)

把一个“名/值对”对象设置为所有匹配元素的样式属性。 这是一种在所有匹配的元素上设置大量样式属性的最佳方式。

首先我们看看

css(key, value)

我们看看下面代码

$("#css1").click(function(){
       $(this).css("border","2px dashed #000000");
    })

当鼠标单击ID等于css1的元素 此元素的border属性设置成 "2px dashed #000000"

css(name)

$("#css2").click(function(){
       $(this).css("border","2px dashed #6600FF");
       alert($(this).css("border"));
    })

$(this).css("border","2px dashed #6600FF");

当鼠标单击ID等于css2的元素 此元素的border属性设置成 "2px dashed #6600FF"

alert($(this).css("border"));

获得border的属性值.

css(properties)

$("#css3").click(function(){
       $(this).css({ color: "red", background: "blue" });
    })

当鼠标单击ID等于css3的元素 样式color为red background为blue


下面我们看看height和width用法 其实从单词意思上也应该知道的差不多

height(val)

为每个匹配的元素设置CSS高度(height)属性的值。如果没有明确指定单位（如：em或%），使用px。

height()

取得第一个匹配元素当前计算的高度值（px）。

height(val)

$("#ht1").click(function(){
       $(this).height("200px");
    alert($(this).height());
    })
$(this).height("200px"); 当鼠标单击ID等于ht1的元素 此元素的高度将变成200px

alert($(this).height());显示height的值

width(val) width() 和height是一样的 只不过就是设置宽度.这里就不多说了.

<!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-Type" content="text/html; charset=utf-8" />
<title>jquery基础教程四(css的操作之css,height和width)</title>
<script language="javascript" src="     $("#css1").click(function(){
       $(this).css("border","2px dashed #000000");
    })
    $("#css2").click(function(){
       $(this).css("border","2px dashed #6600FF");
       alert($(this).css("border"));
    })
    $("#css3").click(function(){
       $(this).css({ color: "red", background: "blue" });
    })
     $("#ht1").click(function(){
       $(this).height("200px");
    alert($(this).height());
    })
})
//--><br%20/>%0D%0A</SCRIPT><br%20/>%0D%0A</head><br%20/>%0D%0A<body><br%20/>%0D%0Acss(key,%20value)%20%E5%9C%A8%E6%89%80%E6%9C%89%E5%8C%B9%E9%85%8D%E7%9A%84%E5%85%83%E7%B4%A0%E4%B8%AD%EF%BC%8C%E8%AE%BE%E7%BD%AE%E4%B8%80%E4%B8%AA%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7%E7%9A%84%E5%80%BC%E3%80%82%20<br%20/>%0D%0A<div%20ID=css1>jquery%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B%E5%9B%9B(css%E7%9A%84%E6%93%8D%E4%BD%9C%E4%B9%8Bcss,height%E5%92%8Cwidth)%20%E5%BD%93%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%20%E6%89%A7%E8%A1%8C%20%24(this).css(%22border%22,%222px%20dashed%20#000000%22);</div><br><br><br%20/>%0D%0Acss(name)%20%E8%AE%BF%E9%97%AE%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%8C%B9%E9%85%8D%E5%85%83%E7%B4%A0%E7%9A%84%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7%E3%80%82%E4%BD%BF%E7%94%A8%E8%BF%99%E4%B8%AA%E6%96%B9%E6%B3%95%E5%8F%AF%E4%BB%A5%E5%BE%88%E5%AE%B9%E6%98%93%E5%9C%B0%E5%8F%96%E5%BE%97%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%8C%B9%E9%85%8D%E5%85%83%E7%B4%A0%E7%9A%84%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7%E7%9A%84%E5%80%BC%E3%80%82</span></span></p>%0D%0A<p><span%20class=%22fn1%22><span%20class=%22fn1%22><div%20ID=css2>jquery%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B%E5%9B%9B(css%E7%9A%84%E6%93%8D%E4%BD%9C%E4%B9%8Bcss,height%E5%92%8Cwidth)%20%E5%BD%93%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%20%E6%89%A7%E8%A1%8C%20%24(this).css(%22border%22,%2210px%20dashed%20#6600FF%22);%20alert(%24(this).css(%22border%22));</div><br><br><br%20/>%0D%0Acss(properties)%E6%8A%8A%E4%B8%80%E4%B8%AA%E2%80%9C%E5%90%8D/%E5%80%BC%E5%AF%B9%E2%80%9D%E5%AF%B9%E8%B1%A1%E8%AE%BE%E7%BD%AE%E4%B8%BA%E6%89%80%E6%9C%89%E5%8C%B9%E9%85%8D%E5%85%83%E7%B4%A0%E7%9A%84%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7%E3%80%82%20%E8%BF%99%E6%98%AF%E4%B8%80%E7%A7%8D%E5%9C%A8%E6%89%80%E6%9C%89%E5%8C%B9%E9%85%8D%E7%9A%84%E5%85%83%E7%B4%A0%E4%B8%8A%E8%AE%BE%E7%BD%AE%E5%A4%A7%E9%87%8F%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7%E7%9A%84%E6%9C%80%E4%BD%B3%E6%96%B9%E5%BC%8F</span></span></p>%0D%0A<p><span%20class=%22fn1%22><span%20class=%22fn1%22><div%20ID=css3>jquery%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B%E5%9B%9B(css%E7%9A%84%E6%93%8D%E4%BD%9C%E4%B9%8Bcss,height%E5%92%8Cwidth)%20%E5%BD%93%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%20%E6%89%A7%E8%A1%8C%20%24(this).css(%7B%20color:%20%22red%22,%20background:%20%22blue%22%20%7D);%20</div><br><br></span></span></p>%0D%0A<p><span%20class=%22fn1%22><span%20class=%22fn1%22>height(val)%E4%B8%BA%E6%AF%8F%E4%B8%AA%E5%8C%B9%E9%85%8D%E7%9A%84%E5%85%83%E7%B4%A0%E8%AE%BE%E7%BD%AECSS%E9%AB%98%E5%BA%A6(height)%E5%B1%9E%E6%80%A7%E7%9A%84%E5%80%BC%E3%80%82%E5%A6%82%E6%9E%9C%E6%B2%A1%E6%9C%89%E6%98%8E%E7%A1%AE%E6%8C%87%E5%AE%9A%E5%8D%95%E4%BD%8D%EF%BC%88%E5%A6%82%EF%BC%9Aem%E6%88%96%%EF%BC%89%EF%BC%8C%E4%BD%BF%E7%94%A8px%E3%80%82</span></span></p>%0D%0A<p><span%20class=%22fn1%22><span%20class=%22fn1%22><br%20/>%0D%0A<div%20ID=ht1>jquery%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B%E5%9B%9B(css%E7%9A%84%E6%93%8D%E4%BD%9C%E4%B9%8Bcss,height%E5%92%8Cwidth)%20%E5%BD%93%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%20%E6%89%A7%E8%A1%8C%20%24(this).height(%22200px%22);alert(%24(this).height());%20</div><br><br><br%20/>%0D%0A</body><br%20/>%0D%0A</html><br%20/>%0D%0A<br%20/>%0D%0A</span></span></p>%0D%0A<p>%E7%A8%8B%E5%BA%8F%E6%BC%94%E7%A4%BA%E5%9C%B0%E5%9D%80:<a%20href=%22http://www.cnjquery.com/demo/jquery%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B%E5%9B%9B(css%E7%9A%84%E6%93%8D%E4%BD%9C%E4%B9%8Bcss,height%E5%92%8Cwidth).html%22%20target=%22_blank%22>http://www.cnjquery.com/demo/jquery%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B%E5%9B%9B(css%E7%9A%84%E6%93%8D%E4%BD%9C%E4%B9%8Bcss,height%E5%92%8Cwidth).html</a></p>%0D%0A</div><div%20id=%22MySignature%22></div>%0D%0A<div%20class=%22clear%22></div>%0D%0A<div%20id=%22blog_post_info_block%22>%0D%0A<div%20id=%22BlogPostCategory%22></div>%0D%0A<div%20id=%22EntryTag%22></div>%0D%0A<div%20id=%22blog_post_info%22>%0D%0A</div>%0D%0A<div%20class=%22clear%22></div>%0D%0A<div%20id=%22post_next_prev%22></div>%0D%0A</div>%0D%0A%0D%0A%0D%0A%09%09</div>%0D%0A%09%09<div%20class%20=%20%22postDesc%22>posted%20@%20<span%20id=%22post-date%22>2008-12-20%2019:55</span>%20<a%20href=" https:>mysun 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/mzoylee/archive/2008/12/20/1359015.html

weixin_30929011
关注
jQuery width( ) 方法
m0_57835615的博客
06-11 684
jQuery width( ) 方法可用于设置或返回被选元素的高度。返回元素的高度时， 只返回匹配到的第一个元素的高度。设置元素的高度时，所有匹配到的元素的高度都会被设置。 值得一提的是，该方法不包含元素的内外边距以及边框。 ...
jQuery.width()和jQuery.css('width')的区别
weixin_34130269的博客
03-18 159
目录 问题描述 调试 总结和补充 问题描述 使用jQuery修改一个div的宽度时，发现$($0).width('10rem')总是修改成不正确的值，然后使用$($0).css('width', '10rem')时却能正确，简单得查阅了下jQuery文档，发现文档里面对$.fn.width的描述是： val为空时是取得第一个匹配元素当前计算的宽度值（px），val不为空时是设置宽度，可以是字...
JQuery .width()/.css("width")方法 比较
weixin_30800807的博客
11-01 141
1. 获取到的值的区别 获取到的为实际宽度，不包括 内边距 和 边框； <div id="aa"> ...... </div> // 1. width() ---- 得到的值为 具体的数值，如：300，500 ; $("#aa").width( ); // // 2. .css("width"); ---- 得到的值为带px的字符串，...
jQuery--.css("width")和.width()的区别
yoyo的专栏
11-01 3438
首先先解释下普通元素和非普通元素，非普通元素是指window，document这些 元素对象，普通元素是指除window，document这些非普通元素外的元素，如：div对于普通的元素 ，他们的作用相同。比如 网页上有一个 div 元素：  我们可以使用：  $(function(){     var width1 = $("div").css("width");     var width2
CSS 操作 - width() 方法
爱吃鱼油
09-23 383
$(document).ready(function(){ $(".btn1").click(function(){ $("span").text($("p").width()); }); }); 本段落的宽度是 unknown px。 获得宽度 计算出span的宽度：
jQuery初学——5-css，width,innerwidth,outerwidth
weixin_43899694的博客
09-21 241
一、css（） 参数可以为 属性名；数组；key-value；对象 返回一个css属性值 $(‘div’).css(‘class’); 返回多个css属性 $(‘div’).css([‘class’,‘id’,‘background’]); 设置一个css属性 $(‘div’).css(‘width’,‘200’); // 200 ‘200’ ‘200px’ 皆可 设置多个css属性 $(‘...
jQuery使用手册之三 CSS操作
10-30
另外，jQuery 还提供了其他与CSS相关的实用方法，如`width()`、`height()`、`left()`、`top()`等，它们分别用于获取或设置元素的宽度、高度、左边距和顶边距。例如，`$("#a").width("200px")`将设置元素`#a`的宽度为...
CSS中height和width在IE和其他浏览器中的区别图文详解
09-25
总的来说，理解CSS中`height`和`width`在不同浏览器下的计算差异，以及如何通过jQuery的辅助方法和`box-sizing`属性来解决这些问题，是进行跨浏览器开发时必不可少的知识。开发者应当始终关注兼容性问题，确保网站在...
基于jquery animate操作css样式属性小结
11-22
jQuery 的 `animate()` 方法是其强大的动画功能之一，它允许开发者平滑地改变HTML元素的CSS样式属性。根据描述和提供的部分内容，我们将深入探讨如何使用 `animate()` 方法以及它可以操作的一些CSS属性。 首先，`...
jQuery学习笔记 操作jQuery对象 CSS处理
12-09
CSS基本属性处理 方法 描述 css(name) 获取元素上CSS规则中name属性值 css(name,value) css(name,fn(index,value)) css({name1:value1,…,nameN:valueN}) 设置元素上CSS规则name属性的值为value，也可...
[jQuery教程]jquery基础教程四(css的操作之css,height和width)
Feiin的专栏
11-30 1062
上面我们学习了jquery 的 addClass和removeClass方法下面我们来看看 css,height和width首先我们看看 css(key, value) 和 css(name) css(key, value)在所有匹配的元素中，设置一个样式属性的值。 css(name)访问第一个匹配元素的样式属性。使用这个方法可以很容易地取得第一个匹配元素的样式属性的值。 css(pr
css 宽度为百分比， 高度和宽度相等的设置
hjh15827475896的博客
06-13 4534
工作中有一个需求， 一行四个图片（正方形的图片），但是我们又要让图片自适应， 不能使用 px 来设置宽度， 要使用百分比，比如上面一行四个图片， 图片的宽度，我们设置了25%， 高度呢，也设置25%吗，这肯定是不正确的， 高度怎么控制就成了难题 像这样的， 我使用的 flex 布局， 图片的宽度是 23% 加上间隙就有 25%了下同看一下解决办法...
JQuery中操作Css样式
diehe5608的博客
09-07 607
//1、获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr("class","divClass")设置Id为two的class属性。 //2、追加样式 $("#two").addClass("divClass2")为ID为two的对象追加样式divClass2 //3、移除样式...
css解决设置宽度百分比，高度跟宽度相等，防止内部图片抖动
木雷双雄7
07-20 7464
1、前提：我的图片宽高比是1：1，在图片外层div高度未设置时（即使设置高度为100%，默认为内容的高度），运行程序会出现图片抖动的现象，代码如下： *{padding:0; margin:0;} .box{width:100%; font-size:0;} .box img{width:100%; height:100%; } .con{width:100%; h
JQuery 的 width() 属性和 css('width')的区别
whp404的博客
07-05 569
width() 返回不带有单位的数值，比如400，而css(“width”)返回带有单位的数值 如400px,所以有数值计算的地方都推荐width()方法 $dom.width() 操作的是元素的content width。 $dom.css(‘width’) 操作的是元素的style上的 width。 根据box-size属性的不同， 这个width可能是 content width 也可能是...
web中文传输解决方法
s763580682的专栏
08-15 747
在web开发中，中文乱码问题，我们经常碰到，尤其是超链接和jquery传输中文到后台的action或者servlet，中文就会变成乱码，影响程序的正常执行。     这里给出一个解决方法，个人觉得不错，分享一下：     1、首先创建一个java类，这里给出它的代码，作用是将中文与英文加字符串的转换：     package com.cn.util; /**  * JavaScript
css设置高度和宽度相同
满大人的博客
05-25 8562
如果确定width:100%;则设置高度 height: 100vw; 如果确定高度height:100%;则设置 width: 100vh;
XHTML简介
qq_48501521的博客
09-11 977
XHTML 指的是可扩展超文本标记语言XHTML 与 HTML 4.01 几乎是相同的XHTML 是更严格更纯净的 HTML 版本XHTML 是以 XML 应用的方式定义的 HTMLXHTML 是 2001 年 1 月发布的 W3C 推荐标准XHTML 得到所有主流浏览器的支持。
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 861
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
jQuery基础教程：Callback、HTML操作与CSS函数
对于尺寸操作，jQuery提供了`height(value)`和`width(value)`函数，可以方便地设置匹配元素的高度和宽度，这对于响应式设计和动态布局调整非常有用。 jQuery的遍历功能是处理DOM树的关键，它包括诸如`.each()`这样...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值