如何设置html中li的属性值

如何设置html中li的属性值,第1张

我设置了li标签的自定义属性,名称是"abc"(见上例),理论上,我可以设置任意名称的自定义属性,我想叫什么名字就叫什么名字

自定义属性是相对于内置属性来说的,

内置属性比如 class,style,title等

如何设置自定义属性呢

使用jQuery有两种方式:

(a)使用attr方法

你绑定个onclick事件好了,然后吧this当参数传进去,在js中处理,根据传入object对象,获取该对象的id属性,这个时候你就知道是谁被选中了,然后还要处理一下冒泡事件。

这是javascript版本的。完成点击按钮放幻灯片的业务,都差不多,你自己看看做吧。javascript和jquery差不多,获取参数的是attr(“id”)。

function display(obj){

$("tp")stylebackgroundImage="url('/TSKJ/images/"+objid+"jpg')";

stopBubble(e);

}

//解决ul中的冒泡事件

function stopBubble(e){

if(e){

estopPropagation();

}else{

windoweventcancelBubble = true;

}

}

这两个CSS属性产生的效果是一样的!

list-style是对列表标签的缩写,而list-style-type是其中的一个属性,而list-style一共可以包含三个值,即:

list-style:type

list-style-position

list-style-image

list-style-type:设置列表项标记的类型。默认为disc。

list-style-position:设置在何处放置列表项标记。值为outside、inside。默认为outside。

list-style-image:使用图像来替换列表项的标记。

如今,我们通常都是使用的list-style-type就可以了,他的主要功能还是设置列表的小圆点的样式,或者取消小圆点的!

希望帮助到你!

1、新建一个html文件,命名为testhtml。

2、在testhtml文件内,使用ul和li标签创建一个列表,li的值分别为测试a,测试b。

3、在testhtml文件内,设置第一个li标签的id为mytest,主要用于下面通过该id获得li对象。

4、在testhtml文件内,使用button标签创建一个按钮,按钮名称为“改变li的值”。

5、在testhtml文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行editli()函数。

6、在js标签中,创建editli()函数,在函数内,使用getElementById()方法通过id(mytest)获得li对象,给该li对象的innerHTML属性重新赋值,实现改变li标签的值。

ul li 是一个组合:是无序列表标签,在实际中用的非常多,

与之对应的是有序列表:ol li

<html>

<body>

<h4>一个无序列表:</h4>

<ul>

  <li>咖啡</li>

  <li>茶</li>

  <li>牛奶</li>

</ul>

</body>

</html><!DOCTYPE html>

<html>

<body>

<ol>

  <li>咖啡</li>

  <li>牛奶</li>

  <li>茶</li>

</ol>

<ol start="50">

  <li>咖啡</li>

  <li>牛奶</li>

  <li>茶</li>

</ol>

 

</body>

</html>

在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性:

节点的名称,是只读的。

节点的值

节点的类型,是只读的。

以下常用的几种结点类型:

元素类型 节点类型

元素 1

属性 2

文本 3

注释 8

文档 9

试一试,在<script>的标签内容,获取所有LI标签,并输出相应节点的名称、节点的值、节点的类型。

以上就是关于如何设置html中li的属性值全部的内容,包括:如何设置html中li的属性值、jquery easyui 如何获取用户点的是那个Li 的值、css中<li>标签的属性list-style和list-style-type这个两个有什么不同啊求高手指教!等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址: http://outofmemory.cn/web/9480431.html

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

发表评论

登录后才能评论

评论列表(0条)

保存