极客教程如何使用JavaScript/jQuery禁用HTML链接
给出一个HTML链接，任务是通过使用JavaScript/jQuery禁用该链接。
使用JavaScript禁用HTML链接
- createAttribute() 方法。该方法用定义的名称创建一个属性，并将该属性作为一个属性对象返回。
语法:
document.createAttribute(attrName)
参数：此方法接受单参数attrName，这是必须的。它指定了创建的属性的名称。
返回值：它返回一个节点对象，表示创建的属性。
- setAttribute()方法。该方法将定义的属性添加到一个元素中，并给它传递值。在指定属性已经存在的情况下，该值被设置/改变。
语法:
element.setAttribute(attrName, attrValue)
参数:
- attrName。这个参数是必需的。它指定了要添加的属性的名称。
- attrValue。这个参数是必需的。它指定了要添加的属性的值。
- setAttributeNode() 方法。该方法将指定的属性节点添加到一个元素中。如果指定的属性已经存在，该方法将取代它。
语法:
element.setAttributeNode(attributeNode)
参数：该方法接受单个参数attributeNode，这是必须的。它指定了要添加的属性节点。
例子1：这个例子借助 setAttribute() 方法在 <a> 元素上增加了 disabled 类。
<!DOCTYPE HTML>
<html>
<head>
<title>
How to disable HTML links
using JavaScript
</title>
<style>
a.disabled {
pointer-events: none;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<a href = "#" id = "GFG_UP">
LINK
</a>
<br><br>
<button onclick = "gfg_Run()">
disable
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var link = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
function gfg_Run() {
link.setAttribute("class", "disabled");
link.setAttribute("style", "color: black;");
down.innerHTML = "Link disabled";
}
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
例子2：这个例子利用 setAttributeNode() 方法在 <a> 元素中加入 disable 類別，首先使用 createAttribute() 方法建立一個屬性，然後將它加入 <a> 元素。
<!DOCTYPE HTML>
<html>
<head>
<title>
How to disable HTML links
using JavaScript
</title>
<style>
a.disabled {
pointer-events: none;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<a href = "#" id = "GFG_UP">
LINK
</a>
<br><br>
<button onclick = "gfg_Run()">
disable
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var link = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
function gfg_Run() {
var attr = document.createAttribute("class");
attr.value = "disabled";
link.setAttributeNode(attr);
link.setAttribute("style", "color: black;");
down.innerHTML = "Link disabled";
}
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
使用jQuery禁用HTML链接
- jQuery prop()方法。这个方法设置/返回匹配元素的属性和值。如果这个方法是用来返回属性值，它返回第一个被选中的元素的值。如果此方法用于设置属性值，它为所选元素集设置一个或多个属性/值对。
语法:
- 返回一个属性的值。
$(selector).prop(property)
- 设置属性和值。
$(selector).prop(property,value)
- 使用一个函数设置属性和值。
$(selector).prop(property,function(index,currentvalue))
- 设置多个属性和值。
$(selector).prop({property:value, property:value,...})
参数:
- property。这个参数指定了属性的名称。
- value。这个参数指定属性的值。
- function(index,currentvalue):这个参数指定了一个函数，返回要设置的属性值。
- index。该参数接收元素在集合中的索引位置。
- currentValue:该参数接收所选元素的当前属性值。
- addClass()方法。这个方法为指定的元素添加一个或多个类名。这个方法对现有的类属性不做任何处理，它为类属性添加一个或多个类名。
语法:
$(selector).addClass(className,function(index,currentClass))
参数:
- className。这个参数是必需的。它指定了一个或多个要添加的类名。
- function(index,currentClass):这个参数是可选的。它指定了一个函数，返回一个或多个要添加的类名。
- index。它返回该元素在集合中的索引位置。
- className。它返回所选元素的当前类别名称。
例子1：这个例子在addClass()方法的帮助下，把class('disabled')添加到<a>元素。
<!DOCTYPE HTML>
<html>
<head>
<title>
How to disable HTML links
using jQuery
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<style>
a.disabled {
pointer-events: none;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<a href = "#" id = "GFG_UP">
LINK
</a>
<br><br>
<button onclick = "gfg_Run()">
disable
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
function gfg_Run() {
('a').addClass("disabled");
('a').css('color', 'black');
$('#GFG_DOWN').text("Link disabled");
}
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
例子2：这个例子在prop()方法的帮助下，给<a>元素添加了class('disabled')。
<!DOCTYPE HTML>
<html>
<head>
<title>
How to disable HTML links
using jQuery
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<style>
a.disabled {
pointer-events: none;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<a href = "#" id = "GFG_UP">
LINK
</a>
<br><br>
<button onclick = "gfg_Run()">
disable
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
function gfg_Run() {
('a').prop("class","disabled");
('a').css('color', 'black');
$('#GFG_DOWN').text("Link disabled");
}
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
