Scribd Logo
Upload

Welcome to Scribd!

  • Acceder A Una Propiedad de Estilo: Ejemplo Supongamos Que Tenemos Una Página Con Tres Elementos de Tipo Bloque

    Uploaded by

    Leri Blanco Marcos
    19 views4 pages
    DD

    Original Title

    2

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    DD

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    19 views4 pages

    Acceder A Una Propiedad de Estilo: Ejemplo Supongamos Que Tenemos Una Página Con Tres Elementos de Tipo Bloque

    Uploaded by

    Leri Blanco Marcos
    DD

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    Acceder a una propiedad de estilo

    El mtodo css()se usa de tres maneras diferentes. La primera solo permite acceder a la propiedad de
    estilo CSS de un elemento dado.
    css(nombre)
    Permite acceder a una propiedad de estilo del primer elemento que se encuentra.
    El nombre es una cadena de caracteres con la propiedad de estilo a la que se va a acceder.
    $("p").css("color");
    Este mtodo enva una cadena de caracteres (string).
    Ejemplo
    Supongamos que tenemos una pgina con tres elementos de tipo bloque.

    El documento Html:

    <!doctype html>
    <html lang="es">
    <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
    div { width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    background-color:#9cf;"}
    </style>
    </head>
    <body>
    <div id="div1"></div>
    <div id="div2" style="border: 3px solid black;"></div>
    <div id="div3" style="visibility: visible;"></div>
    <p style="clear: left;" id="resultado">Resultado</p>
    </body>
    </html>
    Al hacer clic en un elemento de tipo bloque, el script mostrar respectivamente, de izquierda a derecha,
    el color de fondo, el color del borde y la visibilidad.

    Tenemos el script jQuery:

    <script>
    $(document).ready(function(){
    $("#div1").click(function () {
    var color = $(this).css("background-color");
    $("#resultado").html("El color es <span>" + color +
    "</span>.");
    });
    $("#div2").click(function () {
    var borde = $(this).css("border-color");

    $("#resultado").html("El color del borde es <span>" +


    borde + "</span>.");
    });
    $("#div3").click(function () {
    var visibility = $(this).css("visibility");
    $("#resultado").html("La visibilidad es <span>" + visibility +
    "</span>.");
    });
    });
    </script>
    Lo detallamos a continuacin.
    $(document).ready(function(){
    Tan pronto como se carga el DOM.
    $("#div1").click(function () {
    var color = $(this).css("background-color");
    El clic del ratn en el primer cuadrado (id="div1") carga en la variable colorla propiedad del color de
    fondo de este elemento, usando css("background-color").
    $("#resultado").html("El color es <span>" + color + "</span>.");
    });
    El valor de la propiedad de estilo se muestra como Html en la etiqueta <p>, identificada porresultado.
    $("#div2").click(function () {
    var border = $(this).css("border-color");
    El clic del ratn en el segundo cuadrado (id="div2") carga en la variable bordeel color del borde de
    este elemento, usando css("border-color").
    $("#resultado").html("El color del borde es <span>" + border +
    "</span>.");
    });
    El valor se mostrar en la pgina Html.
    $("#div3").click(function () {
    var visibility = $(this).css("visibility");
    El clic del ratn en el tercer cuadrado (id="div3") carga en la variable visibility el estado de
    visibilidad de este elemento, usando css("visibility").
    $("#resultado").html("La visibilidad es <span>" + visibility +
    "</span>.");
    });
    El valor se mostrar en la pgina.
    });
    Fin del script.
    El archivo final es:

    <!doctype html>
    <html lang="es">
    <head>

    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="jquery.js" ></script>
    <script>
    $(document).ready(function(){
    $("#div1").click(function () {
    var color = $(this).css("background-color");
    $("#resultado").html("El color es <span>" + color +
    "</span>.");
    });
    $("#div2").click(function () {
    var borde = $(this).css("border-color");
    $("#resultado").html("El color del borde es <span>" +
    borde + "</span>.");
    });
    $("#div3").click(function () {
    var visibility = $(this).css("visibility");
    $("#resultado").html("La visibilidad es <span>" + visibility +
    "</span>.");
    });
    });
    </script>
    <style>
    div { width:60px;
    height:60px;
    margin:5px;
    float:left;
    background-color:#9cf;"}
    </style>
    </head>
    <body>
    <div id="div1"></div>
    <div id="div2" style="border: 3px solid black;"></div>
    <div id="div3" style="visibility: visible;"></div>
    <p style="clear: left;" id="resultado">Resultado </p>
    </body>
    </html>

    You might also like