Hay muchas formas de establecer atributos sin valor usando jQuery. El método jQuery prop() se usa para obtener o establecer los valores de los atributos. Para cambiar las propiedades como marcado, marcado predeterminado, deshabilitado, índice seleccionado, seleccionado predeterminado y estado seleccionado del modelo de objeto del documento, utilice el método jQuery .prop() . Además, podemos usar el método attr() para hacer eso. Debajo de ambos, los métodos se describen con la ayuda de ejemplos.
Método 1: puede usar el método jQuery attr() , que es una función para establecer atributos para un conjunto de elementos coincidentes y luego pasar una string vacía. Será equivalente a establecer un atributo sin valor.
- Sintaxis:
.attr(attribute-name, value to be passed)
- Ejemplo 1 :
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Setting attribute without value
</title>
<style>
div {
color: blue;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.4.1.js">
</script>
</head>
<body>
<p>
Let us learn about
<b title="jQuery, attr() ">method</b>
for setting attributes.
</p>
To set the value of attribute, use :
<div></div>
<script>
var title = $("b").attr("title");
$("div").text(title);
</script>
</body>
</html>
- Producción:
Método 2: Esto se hace usando el método jQuery prop() que se usa para desarrollar atributos de solo nombre.
- Sintaxis:
prop(para1, para2)
- Ejemplo 1 :
html
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$('#btnDiv').click(function() {
var content = $('.active').attr('class');
$("#showDivContent").text(content);
});
$('#btnPara').click(function() {
var style = $('p').prop('style');
var styleName = style.fontWeight
$("#showParastyle").text(styleName);
});
});
</script>
<style>
body {
width: 450px;
height: 300px;
margin: 10px;
float: left;
}
.active {
background-color: yellow;
margin: 5px 0 0 0;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<b>
Setting attributes without value using jQuery
</b>
<br>
<br>
<button id="btnDiv">
Get div class name
</button>
<button id="btnPara">
Get paragraph style
</button>
<div id="showDivContent"
class="active">
This is div.
</div>
<p id="showParastyle"
style="font-size:16px;
font-weight:bold;">
This is paragraph.
</p>
<div class="active">
This is div.
</div>
</body>
</html>
- Producción :
- Ejemplo 2:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Setting attributes without
values using jQuery
</title>
<style>
p {
margin: 20px 0 0;
}
b {
color: blue;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.4.1.js">
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<label for="checkboxId">
Check me
</label>
<input id="checkboxId"
type="checkbox"
checked="checked">
<p></p>
<script>
$("input") .change(function() {
var $input = $(this);
$("p").html(".attr( 'checked' ): <b>"
+ $input.attr("checked") + "</b><br>"
+ ".prop( 'checked' ): <b>"
+ $input.prop("checked") + "</b><br>"
+ ".is( ':checked' ): <b>"
+ $input.is(":checked") + "</b>");
}).change();
</script>
</body>
</html>
- Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA