怎么给每一个div加一个id

怎么给每一个div加一个id,第1张

<div id="a">

<div id="b">

像以上这两条就可以

定义和用法

<div>可定义文档中的分区或节(division/section)。

<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。

用法

<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div>固有的唯一格式表现。可以通过 <div>的 class 或 id 应用额外的样式。

不必为每一个 <div>都加上类或 id,虽然这样做也有一定的好处。

可以对同一个 <div>元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

使用attr()或prop()方法为id属性赋值即可,关键代码

$(obj_div).attr('id',id_name)

$(obj_div).prop('id',id_name)

实例演示如下:点击按钮设置div标签的id为test,为了便于观察效果,css中设置了id为test的样式为红色

1、HTML结构

<style>

#test{color:red !important font-weight:bold}

</style>

<div>我是示例DIV</div>

<input type="button" value="设置上一个div的id为test">

2、jquery代码

$(function(){

$("input:button").click(function() {

$(this).prev("div").attr("id","test")

})

})

3、效果演示

一、首先,我们先设计一个div,并且给这个div添加一个id,id名随意取。然后设置一下宽高,并且添加一个红色的背景属性值。默认情况下,这个div是靠近浏览器的顶部和左边的。

二、接着我们给这个div设置一下margin值,从左到右表示的是上边,右边,下边,左边的margin值。设置好之后,可以看到左边和上边都隔开了一定的距离,这就是margin值的用处,而下边和右边因为没有其他div或者其他颜色,所以效果被忽略了。当然,margin值也可以分开写,比如我只设置div的上边的margin值,就可以使用margin-top,而右边则可以使用margin-right,左边则是margin-left,下边则是margin-bottom。

三、设置margin-top之后,只有上边拉开了距离,而左边并没有拉开距离。接着我们再在网页中添加一个div,并设置id为“you”。接着设置“you”这个div的宽高和背景。

四、新添加一个div之后,如果没有设置margin-bottom的值,两个div就会连在一起。

然后我们给上面的div,也就是“my”,设置margin-bottom。设置好之后,两个div之间就会拉开距离,这样就可以定位好div的位置。

五、如果我们给“my”设置好margin-bottom之后,又给“you”设置margin-top,又会有什么结果呢?结果就是这样:有两个相邻的div,如果一个div设置了margin-top,另一个设置了margin-bottom,则以它们之间值最大的为准。

六、比如margin-top是50像素,margin-bottom是30像素,则间隔就是50像素,而不是两个相加哦。了解这个之后,在网页布局中,我们只需要对其中一个设置就可以了。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11441478.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-16
下一篇2023-05-16

发表评论

登录后才能评论

评论列表(0条)

    保存