Javascript 在运行时设置 href 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4345427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting href attribute at runtime
提问by gautamlakum
What is the best way to set the hrefattribute of the <a>tag at run time using jQuery?
在运行时使用 jQuery设置标签href属性的最佳方法是什么<a>？
Also, how do you get the value of the hrefattribute of the <a>tag using jQuery?
另外，你如何使用jQueryhref获取<a>标签的属性值？
回答by
To get or set an attribute of an HTML element, you can use the element.attr()function in jQuery.
要获取或设置 HTML 元素的属性，您可以使用element.attr()jQuery 中的函数。
To get the hrefattribute, use the following code:
要获取href属性，请使用以下代码：
var a_href = $('selector').attr('href');
To set the hrefattribute, use the following code:
要设置href属性，请使用以下代码：
$('selector').attr('href','http://example.com');
In both cases, please use the appropriate selector. If you have set the class for the anchor element, use '.class-name'and if you have set the id for the anchor element, use '#element-id'.
在这两种情况下，请使用适当的选择器。如果您已经为锚元素设置了类，请使用'.class-name'，如果您已经为锚元素设置了 id，请使用'#element-id'.
回答by Gerbus
In jQuery 1.6+ it's better to use:
在 jQuery 1.6+ 中最好使用：
$(selector).prop('href',"http://www...")to setthe value, and
$(selector).prop('href',"http://www...")到设定值，
$(selector).prop('href')to getthe value
$(selector).prop('href')以获取价值
In short, .propgets and sets values on the DOMobject, and .attrgets and sets values in the HTML. This makes .propa little faster and possibly more reliable in some contexts.
简而言之，.prop在DOM对象上.attr获取和设置值，在HTML 中获取和设置值。.prop在某些情况下，这会使速度更快，并且可能更可靠。
回答by Valentin Flachsel
Set the hrefattribute with
设置href属性
$(selector).attr('href', 'url_goes_here');
and read it using
并使用阅读它
$(selector).attr('href');
Where "selector" is any valid jQuery selector for your <a>element (".myClass" or "#myId" to name the most simple ones).
其中“选择器”是<a>元素的任何有效 jQuery 选择器（“.myClass”或“#myId”以命名最简单的选择器）。
Hope this helps !
希望这可以帮助 ！
回答by Kamil Kie?czewski
Small performance test comparision for three solutions:
三种方案的小型性能测试对比：
$(".link").prop('href',"https://example.com")$(".link").attr('href',"https://example.com")document.querySelector(".link").href="https://example.com";
$(".link").prop('href',"https://example.com")$(".link").attr('href',"https://example.com")document.querySelector(".link").href="https://example.com";
Here you can perform test by yourself https://jsperf.com/a-href-js-change
在这里你可以自己进行测试https://jsperf.com/a-href-js-change
We can read href values in following ways
我们可以通过以下方式读取 href 值
let href = $(selector).prop('href');let href = $(selector).attr('href');let href = document.querySelector(".link").href;
let href = $(selector).prop('href');let href = $(selector).attr('href');let href = document.querySelector(".link").href;
Here you can perform test by yourself https://jsperf.com/a-href-js-read
在这里你可以自己进行测试https://jsperf.com/a-href-js-read
回答by Nanang HD
<style>
a:hover {
cursor:pointer;
}
</style>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".link").click(function(){
var href = $(this).attr("href").split("#");
$(".results").text(href[1]);
})
})
</script>
<a class="link" href="#one">one</a><br />
<a class="link" href="#two">two</a><br />
<a class="link" href="#three">three</a><br />
<a class="link" href="#four">four</a><br />
<a class="link" href="#five">five</a>
<br /><br />
<div class="results"></div>
