La propiedad cssText se usa para establecer o devolver el valor de una declaración de estilo en línea de un elemento .
Sintaxis:
- Se utiliza para devolver la propiedad cssText.
element.style.cssText
- También se usa para establecer la propiedad cssText.
element.style.cssText = style
El valor de la propiedad:
- estilo: Es un literal de string que especifica el estilo que se agregará al elemento.
Valor devuelto: Devuelve el estilo en línea del elemento en forma de string.
Ejemplo-1: Para obtener la propiedad cssText :
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS StyleDeclaration cssText Property
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<!-- Adding inline style -->
<p id="p1"
style="color:green;
font-size:20 ">
cssText Property
</p>
<p>
Click the button
to get the style
</p>
<button onclick="myFunction()">
Get style
</button>
<p id="gfg">
</p>
<!-- Script to get
cssText property -->
<script>
function myFunction() {
var x =
document.getElementById(
"p1").style.cssText;
document.getElementById(
"gfg").innerHTML = x;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2: Para establecer la propiedad cssText :
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS StyleDeclaration cssText Property
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<!-- Adding inline style -->
<p id="p1"
style="color:green;
font-size:20 ">
cssText Property
</p>
<p>
Click the button to change the style
</p>
<button onclick="myFunction()">
Set style
</button>
<p id="gfg"></p>
<!-- Script to set cssText property -->
<script>
function myFunction() {
document.getElementById(
"p1").style.cssText =
"color:blue; font-size:15";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con CSS StyleDeclaration cssText Property se enumeran a continuación:
- Google cromo 1
- Borde 12
- explorador de Internet 5
- Firefox 1
- Ópera 12.1
- Safari 1
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA