我有一个表单输入元素,想要更改其title属性。这必须很容易,但由于某种原因,我找不到如何做到这一点。这是怎么做的,我应该在哪里以及如何搜索如何做到这一点?
答案 0 :(得分:426)
在编写任何代码之前,让我们讨论属性和属性之间的区别。属性是您应用于 HTML标记中元素的设置;然后,浏览器解析标记并创建包含使用属性值初始化的属性的各种类型的DOM对象。在DOM对象上,例如简单的HTMLElement
,您几乎总是希望使用其属性,而不是属性集合。
目前的最佳做法是避免使用属性,除非它们是自定义的,或者没有相应的属性来补充它。由于title
确实在许多HTMLElement
上作为读/写属性存在,我们应该利用它。
考虑到这一点,让我们操纵title
...
title
属性,不用 jQuery 由于title
是一个公共属性,您可以使用纯JavaScript在任何支持它的DOM元素上设置它:
document.getElementById('yourElementId').title = 'your new title';
检索几乎相同;这里没什么特别的:
var elementTitle = document.getElementById('yourElementId').title;
如果你是一个优化问题,这将是改变标题的最快方法,但是因为你想要jQuery参与:
title
属性 jQuery在v1.6中引入了一个新方法来获取和设置属性。要在元素上设置title
属性,请使用:
$('#yourElementId').prop('title', 'your new title');
如果您想要检索标题,请省略第二个参数并捕获返回值:
var elementTitle = $('#yourElementId').prop('title');
查看jQuery的prop()
API documentation。
如果您确实不想使用属性,或者您在v1.6之前使用的是jQuery版本,那么您应该继续阅读:
title
属性(版本< 1.6)您可以使用以下代码更改title
属性:
$('#yourElementId').attr('title', 'your new title');
或者使用以下方法检索它:
var elementTitle = $('#yourElementId').attr('title');
查看jQuery的attr()
API documentation。
答案 1 :(得分:30)
在jquery ui模式对话框中,您需要使用此构造:
$( "#my_dialog" ).dialog( "option", "title", "my new title" );
答案 2 :(得分:16)
我相信
$("#myElement").attr("title", "new title value")
或
$("#myElement").prop("title", "new title value")
应该做的伎俩...
我认为你可以找到jQuery Docs中的所有核心功能,虽然我讨厌格式化。
答案 3 :(得分:7)
如果您愿意,另一个选项是从jQuery对象获取DOM元素并在其上使用标准DOM访问器:
$("#myElement")[0].title = "new title value";
其他人提到的“jQuery方式”是使用attr()方法。请参阅attr()here的API文档。
答案 4 :(得分:2)
jqueryTitle({
title: 'New Title'
});
获得第一个标题:
jqueryTitle('destroy');
答案 5 :(得分:2)
如果您要创建div
并尝试向其添加title
。
尝试
var myDiv= document.createElement("div");
myDiv.setAttribute('title','mytitle');
答案 6 :(得分:0)
作为@Cᴏʀʏ答案的补充,请确保尚未在HTML元素中手动设置工具提示的标题。在我的情况下,工具提示的span类已经具有固定的标题文本,因此我的JQuery函数$('[data-toggle="tooltip"]').prop('title', 'your new title');
无法正常工作。
当我在HTML span类中删除title属性时,jQuery正在运行。
所以:
<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
<span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" title="this is my pre-set title text"></span>
</span>
应为代码
<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
<span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top"></span>
</span>