Guarde esta página para probar los ejemplos siguientes.

La biblioteca jQuery proporciona una serie de métodos prácticos y especializados que facilitan el trabajo con estilos CSS. Uno de los métodos más utilizados de este tipo es método css(), Breve descripción que se muestra en la siguiente tabla:

Cuando lees valores de propiedad usando el método css(), obtienes el valor de propiedad que tiene el primero de los elementos contenidos en el objeto jQuery. Al mismo tiempo, cuando estableces una propiedad, el cambio que realizas se aplica a todos los elementos del conjunto. A continuación se proporciona un ejemplo del uso más simple del método css():

$(función() ( var sizeVal = $("label").css("font-size"); console.log("Tamaño de fuente: " + sizeVal); $("label").css("font- tamaño", "1,5 em"); ));

En este script, seleccionamos todos los elementos de la etiqueta, obtenemos el valor de la propiedad de tamaño de fuente usando el método css() y lo imprimimos en la consola. Luego seleccionamos todos los elementos de la etiqueta nuevamente y asignamos un nuevo valor de la misma propiedad a todos los elementos.

A pesar de que el script utiliza el nombre real de la propiedad (tamaño de fuente) y no su notación que distingue entre mayúsculas y minúsculas, es decir el formulario de entrada en el que se define esta propiedad en el objeto HTMLElement (la propiedad fontSize), también se acepta correctamente, ya que jQuery soporta ambas opciones.

Como resultado de ejecutar este script, se muestra el siguiente resultado en la consola:

Establecer una propiedad en la cadena vacía ("") equivale a eliminar esa propiedad del atributo de estilo del elemento.

Configurar múltiples propiedades CSS a la vez

Hay dos formas de configurar varias propiedades CSS a la vez. La primera es formar una cadena de llamadas al método css(), como se muestra a continuación:

$(función() ( $("etiqueta").css("tamaño de fuente", "1.5em").css("color", "azul"); ));

Este script establece las propiedades de color y tamaño de fuente. Se puede lograr el mismo efecto usando un objeto de visualización, como se muestra en el siguiente ejemplo:

$(function() ( var cssVals = ( "font-size": "1.5em", "color": "azul" ); $("label").css(cssVals); ));

Ambos escenarios conducen al mismo resultado, como se muestra en la figura:

Establecer valores relativos

El método css() también puede tomar valores relativos como argumentos. Son valores numéricos que van precedidos de los signos += y -= y se suman o restan al valor actual. Esta técnica sólo se puede utilizar para valores numéricos. A continuación se proporciona un ejemplo correspondiente:

$(función() ( $("etiqueta:impar").css("tamaño de fuente", "+=5") $("etiqueta:par").css("tamaño de fuente", "-=5 ") ));

Los valores relativos se expresan en las mismas unidades que los valores de propiedad. En este caso, el tamaño de fuente aumenta en 5 píxeles para los elementos de etiqueta impares y disminuye en la misma cantidad para los pares. El resultado se muestra en la figura:

Establecer propiedades usando una función

Puede establecer valores de propiedad dinámicamente pasando una función al método css(). A continuación se proporciona un ejemplo correspondiente:

$(function() ( $("label").css("border", function(index, currentValue) ( ​​​​if ($(this).closest("#row1").length > 0) ( return " rojo sólido grueso"; ) else if (index % 2 == 1) ( return "azul doble grueso"; ) )); ));

Los argumentos pasados ​​a la función son el índice del elemento del conjunto y el valor actual de la propiedad. Esta variable se refiere al objeto HTMLElement correspondiente al elemento y la función devuelve el valor que se establecerá.

Usar métodos especializados para trabajar con propiedades CSS

Además del método css(), jQuery define una serie de métodos especializados para obtener o establecer los valores de propiedades específicas. En la siguiente tabla se proporciona una lista de estos métodos:

Métodos para trabajar con propiedades CSS específicas

Método	Descripción
altura()	Devuelve la altura (en píxeles) del primer elemento contenido en un objeto jQuery
altura (valor)	Establece la altura de todos los elementos contenidos en un objeto jQuery
altura interna()	Devuelve la altura intrínseca (es decir, la altura de un elemento, incluido el relleno, pero excluyendo bordes y márgenes) del primer elemento contenido en un objeto jQuery.
ancho interno()	Devuelve el ancho intrínseco (es decir, el ancho del elemento, incluido el relleno, pero excluyendo bordes y márgenes) del primer elemento contenido en un objeto jQuery.
compensar()	Devuelve las coordenadas del primero de los elementos contenidos en un objeto jQuery, relativas al inicio del documento.
altura exterior (valor_booleano)	Devuelve la altura del primer elemento contenido en un objeto jQuery, incluido el relleno y el borde. El argumento determina si el tamaño de los campos debe tenerse en cuenta en este caso.
ancho exterior (valor_booleano)	Obtiene el ancho del primer elemento contenido en un objeto jQuery, incluidos el relleno y el borde. El argumento determina si el tamaño de los campos debe tenerse en cuenta en este caso.
posición()	Devuelve las coordenadas del primer elemento contenido en un objeto jQuery, en relación con él. elemento padre, que tiene un tipo de posicionamiento especificado
desplazarse hacia la izquierda(), desplazarse hacia arriba()	Obtiene el valor de relleno de desplazamiento izquierdo o superior para el primero de los elementos contenidos en un objeto jQuery.
desplazarseIzquierda(valor), desplazarseArriba(valor)	Establece el valor de relleno de desplazamiento izquierdo o superior para todos los elementos contenidos en un objeto jQuery
ancho()	Obtiene el ancho del primer elemento contenido en un objeto jQuery
ancho (valor)	Establece el ancho de todos los elementos contenidos en un objeto jQuery
alto(función), ancho(función)	Establece la altura o el ancho de todos los elementos contenidos en un objeto jQuery usando la función

Los nombres de la mayoría de estos métodos se explican por sí solos, pero algunos de ellos requieren una explicación adicional. Métodos compensar() Y posición() devolver un objeto que tiene propiedades arriba Y izquierda, que indican la posición del elemento. A continuación se proporciona un ejemplo del uso del método position().

Veamos cómo agregar propiedades usando algunos ejemplos. CSS a la página del sitio usando jQuery. Veamos los pros y los contras de las dos formas principales de cambiar estilos en una página.

Para cambiar la configuración del contenido de la página usando la biblioteca jQuery para javascript, puedes utilizar dos métodos:

1. Cambiar propiedades individuales

Cambiemos elementos con propiedades. clase uno Y .clase dos al pasar el cursor sobre un elemento con una clase .sitio web.

$(".sitio"). mouseover(función()( $(".clase-uno, .clase-dos") . css ("ancho", "30%"); $(".clase-uno, .clase-dos") . css("altura", "240px"); } ) ;

Cambiando de clases

Este método es preferible y más conveniente si necesita cambiar muchas propiedades diferentes usando jQuery. Si todas estas propiedades se especifican en el archivo js, entonces puede complicar seriamente la legibilidad y comprensión de todo el código. Es mejor escribir todos los estilos en un archivo CSS y usar jQuery para cambiarlos.

Cuando ocurra un evento, cambiaremos el estilo. .clase uno en estilos .clase-uno .clase-dos:

$(".sitio"). on ("mouseover mousemove", función () ( $(".clase-uno"). eliminarClase(). addClass("clase-uno clase-dos"); } ) ;

Si observa detenidamente el código anterior, es posible que se pregunte por qué eliminamos la clase. clase uno y luego lo devolvemos junto con el otro.

Esto es necesario porque en este código se decidió .clase unoÚselo como “atajo” para que en el futuro pueda procesar este elemento sin recordar qué nueva clase tiene.

Devuelve o cambia los valores CSS de los elementos de la página seleccionados. La función tiene cuatro usos:

devuelve el valor css nombre de estilo en el elemento seleccionado. Si se seleccionan varios elementos, el valor se tomará del primero.

valor-css nombre de estilo se le asignará el valor valor, para todos los elementos seleccionados.

grupo de valores css Nombre de estilo1, Nombre de estilo2, ... se asignarán valores valor1, valor2, ..., para todos los elementos seleccionados.

valor-css nombre de estilo Se le asignará el valor devuelto por la función definida por el usuario. La función se llama por separado para cada uno de los elementos seleccionados. Cuando se llama, se le pasan los siguientes parámetros: índice— la posición del elemento en el conjunto, valor— valor actual del valor CSS nombre de estilo en el elemento.

Ejemplos de uso:

Comentario: Es importante tener en cuenta que al utilizar el método .css(styleName) solo obtendrás los valores css del primer elemento de todos los seleccionados. Si necesita los valores de todos los elementos, entonces debe usar construcciones como .map() o .each() .

En acción

Busquemos nuestra Tierra natal entre la lista de planetas y resaltémosla en verde:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~ lt~/script~gt~ ~lt~style~gt~ #list( ancho:260px; ) .item( ancho: 250px; alto: 20px; flotante: izquierda; margen: 1px; relleno: 3px; color de fondo: # EEEEEE; tipo-estilo de lista: ninguno; ) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id="lista"~gt~ ~lt~li class="item"~gt~Mercurio~lt~/li ~gt~ ~lt~li class="item"~gt~Venus~lt~/li ~gt~ ~lt~li class="item"~gt~ Tierra~lt~/li ~gt~ ~lt~li class="item"~gt~Marte~lt~/li ~gt~ ~lt~li class="item"~gt~Júpiter~lt~/li ~gt ~ ~lt~li class="item"~gt~Satrurn~lt~/li ~gt~ ~lt~li class="item"~gt~Urano~lt~/li ~gt~ ~lt~li class=" item"~gt~Neptuno~lt~/li ~gt~ ~lt~li class="item"~gt~Pluto~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~gt~ $("#list .item").css("color de fondo", función(i,val)( if($(this).text() == "Ground") devuelve "#cceecc"; en caso contrario, devuelve val ; )); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

La biblioteca jQuery le permite manipular las propiedades y atributos de los elementos de un conjunto ajustado cambiando los valores originales. Puede establecer nuevas propiedades y obtener y cambiar los valores de las propiedades originales. Al eliminar o agregar clases, puede cambiar dinámicamente el estilo de visualización de los elementos.

Manipulación de propiedades y atributos de elementos

1. Agregar y eliminar una clase

1.1. Método.addClass()

Agrega la clase especificada (o varias clases) a cada elemento del conjunto empaquetado. Para que este método funcione, primero debes crear un estilo para la clase agregada. El método no elimina la clase anterior, simplemente agrega una nueva.

AgregarClase(nombre de clase) nombre de la clase— uno o más nombres de clase, separados por espacios. .addClass(función) función- devuelve uno o más nombres de clase, separados por espacios, para agregarlos a los existentes. Toma el índice de un elemento del conjunto como argumento y nombre existente clase(s).

1.2. Método.removeClass()

Elimina los nombres de clase especificados de todos los elementos del conjunto empaquetado.

RemoveClass(nombre de clase) nombre de la clase— parámetro opcional, uno o más nombres de clase separados por un espacio. Si no se especifica el nombre de la clase, el método elimina todas las clases existentes de los elementos del conjunto. Si se especifica un nombre de clase, elimina solo la clase especificada. .removeClass(función) función- Devuelve uno o más nombres de clase, separados por espacios, para eliminarlos de los existentes. Toma como argumento el índice del elemento del conjunto y el nombre antiguo de la(s) clase(s).

1.3. Método.toggleClass()

Agrega o elimina una o más clases de cada elemento del conjunto. Cada elemento del conjunto envuelto se verifica por separado. El método agrega el nombre de clase especificado si no está presente en el elemento y lo elimina de aquellos elementos donde está presente. Se utiliza para alternar la representación visual de elementos.

ToggleClass(nombre de clase) nombre de la clase- uno o más nombres de clase, separados por espacios, que se alternarán para cada elemento del conjunto. .toggleClass(nombre de clase, booleano) nombre de la clase- uno o más nombres de clase, separados por espacios, que se alternarán para cada elemento del conjunto. valor booleano— instala, agrega o elimina la clase especificada. True agrega la clase, false la elimina. .toggleClass(booleano) valor booleano— parámetro opcional, establece si se cambiarán las clases de cada elemento del conjunto. .toggleClass(función, booleana) función- devuelve el nombre de la clase que se alternará para cada elemento del conjunto. Recibe como argumentos el índice del elemento del conjunto y el valor antiguo de la clase. valor booleano— parámetro opcional, establece si se cambiarán las clases de cada elemento del conjunto.

1.4. Método.hasClass()

Consulta disponibilidad nombre especificado clase para al menos un elemento en el conjunto correspondiente. Devuelve verdadero si al menos uno de los elementos del conjunto tiene un nombre de clase válido; falso en caso contrario.

HasClass(nombre de clase) nombre de la clase— una cadena con el nombre de la clase a buscar.

2. Cambiar los atributos del elemento

El método obtiene el valor del atributo del primer elemento del conjunto o establece uno o más valores de atributo para los elementos del conjunto.

2.1. Método.attr()

.attr(nombre del atributo) Nombre del Atributo- Devuelve el valor del atributo del primer elemento del conjunto ajustado. Si falta el atributo, devuelve indefinido. .attr(nombre del atributo, valor) Nombre del Atributo significado- una cadena o número que se agregará como valor de atributo para todos los elementos del conjunto ajustado. .attr(atributos) atributos- los valores que se copian de las propiedades del objeto se establecerán para todos los elementos del conjunto ajustado. .attr(nombre del atributo, función) Nombre del Atributo— especifica el nombre del atributo para el cual se establecerá el valor especificado. función— toma como argumentos el índice del elemento del conjunto y el valor antiguo del atributo. El valor de retorno se establecerá en el valor del atributo.

2.2. Método.removeAttr()

Elimina el atributo especificado de cada elemento del conjunto ajustado.

RemoveAttr(nombre del atributo) Nombre del Atributo— una cadena que define el atributo que se va a eliminar.

3. Cambiar las propiedades del elemento

3.1. Método.css()

Devuelve el valor calculado de la propiedad de estilo para el primer elemento del conjunto ajustado o establece una o más propiedades CSS para cada elemento del conjunto.

CSS(nombre de propiedad) nombre de la propiedad— una cadena con el nombre de la propiedad, devuelve su valor calculado para el primer elemento del conjunto. .css(nombres de propiedad) nombres de propiedades— una matriz de propiedades que devuelve sus valores calculados para el primer elemento del conjunto. .css(nombre de propiedad, valor) nombre de la propiedad significado es una cadena o número que se establecerá como el valor de la propiedad especificada para todos los elementos del conjunto ajustado. .css(nombre de propiedad, función) nombre de la propiedad— una cadena con el nombre de la propiedad. función— el índice del elemento del conjunto y el valor anterior de la propiedad se pasan como argumentos a la función. El valor de retorno se establecerá en todos los elementos del conjunto. .css(objeto de propiedades) objeto de propiedades- agrega propiedades CSS cuyos nombres se definen como claves en el objeto pasado a sus valores asociados para todos los elementos del conjunto correspondiente.

4. Obtener y cambiar las dimensiones y coordenadas de un elemento.

4.1. Método.ancho()

Devuelve el ancho actual del primer elemento de un conjunto o establece el ancho de cada elemento de un conjunto. La unidad de medida predeterminada es px. El método se puede utilizar si el valor obtenido se utilizará en cálculos matemáticos. Las dimensiones se calculan sin tener en cuenta las sangrías ni el grosor del marco, sin especificar la unidad de medida. A medida que cambia el tamaño de la ventana del navegador, las dimensiones del elemento pueden cambiar.

Ancho() El método se llama sin parámetros. Devuelve el valor de ancho actual para el primer elemento de un conjunto, sin especificar una unidad. .ancho(valor) significado- un valor numérico entero o un valor de cadena del ancho que se establecerá para cada elemento del conjunto. .ancho(función) función- toma como argumento el índice del elemento y el valor anterior de la propiedad, el valor de retorno se establecerá en el ancho de todos los elementos.

4.2. Método.altura()

Devuelve el valor de altura actual para el primer elemento de un conjunto o establece la altura de cada elemento de un conjunto.

Height() El método se llama sin parámetros. Devuelve el valor de altura actual para el primer elemento de un conjunto. .altura(valor) significado— un valor numérico entero o un valor de altura de cadena que se establecerá para cada elemento del conjunto. .altura(función) función- toma como argumento el índice del elemento y el valor anterior de la propiedad, el valor de retorno se establecerá en la altura de todos los elementos.

4.3. Método.anchointerior()

Devuelve el ancho del primer elemento del conjunto empaquetado, incluido el relleno, o lo establece para cada elemento del conjunto empaquetado.

InnerWidth() El método se llama sin parámetros. Devuelve el ancho interior actual del primer elemento de un conjunto. .anchointerior(valor) significado— un valor numérico entero que se establecerá para cada elemento del conjunto. .anchointerior(función) función

4.4. Método.alturainterior()

Devuelve la altura del primer elemento del conjunto ajustado, teniendo en cuenta el relleno.

InnerHeight() El método se llama sin parámetros. Devuelve el valor de altura interior actual para el primer elemento de un conjunto. .alturainterior(valor) significado— un valor numérico entero que se establecerá para cada elemento del conjunto. .alturainterior(función) función- toma como argumento el índice del elemento y el valor anterior de la propiedad, el valor de retorno se establecerá en el ancho interno para todos los elementos del conjunto.

4.5. Método.anchoexterior()

Devuelve el ancho del primer elemento del conjunto ajustado. Estas dimensiones incluyen el grosor del marco y el ancho de la sangría.

Ancho exterior (booleano) valor booleano

4.6. Método.alturaexterior()

Devuelve la altura del primer elemento del conjunto envuelto. Estas dimensiones incluyen el grosor del marco y el ancho de la sangría.

Altura exterior (booleana) valor booleano— valor opcional, si se establece en verdadero, el valor del margen se tiene en cuenta; de lo contrario, no.

4.7. Método.offset()

Obtiene las coordenadas actuales del primer elemento o establece las coordenadas de cada elemento. Devoluciones Objeto JavaScript con las propiedades izquierda y superior que contienen las coordenadas px del primer elemento del conjunto ajustado en relación con el inicio del documento. El método se aplica sólo a elementos visibles.

Offset() El método se llama sin parámetros.

4.8. Método.posición()

Devuelve un objeto JavaScript con las propiedades izquierda y superior que contienen las coordenadas px del primer elemento del conjunto ajustado en relación con el elemento principal más cercano. El método se aplica sólo a elementos visibles.

Position() El método se llama sin parámetros.

Ha pasado mucho tiempo desde que tuve artículos sobre JQuery en mi blog. No, había artículos que lo usaban, por supuesto, pero actuaba allí como una herramienta auxiliar y, mientras tanto, la sección "Aprender JQuery" estaba cubierta de polvo. Mientras tanto, ha llegado el momento de pasar a la parte más interesante del entrenamiento: añadir varios efectos, razón por la cual mucha gente empieza a estudiarlo. Y en el artículo de hoy aprenderá cómo cambiar las propiedades de CSS sobre la marcha.

Antes de entrar en los efectos en sí, retrocedamos un poco y echemos un vistazo al CSS. En artículos anteriores, cambiamos apariencia páginas, agregando o eliminando varias clases CSS, que primero, por supuesto, deben crearse en el archivo CSS. Normalmente esto La direccion correcta, porque considera el papel de CSS en la formación de la página.

Sin embargo, hay ocasiones en las que es necesario cambiar un estilo CSS que no está en la hoja de estilos o que no se puede describir. Para tales casos, JQuery tiene el método .css().

Para obtener el valor de una propiedad CSS, simplemente debemos pasar el nombre de la propiedad como una cadena, algo como esto. css('colordefondo') .

Las propiedades que constan de varias palabras se pueden escribir con un guión, como en un archivo CSS (color de fondo), o en mayúsculas y minúsculas, como están escritas en el DOM (color de fondo). Para establecer propiedades CSS, el método .css() utiliza dos métodos. El primer método consta de dos parámetros, el nombre de la propiedad CSS y su valor, separados por comas. El segundo es un mapa que consta de pares propiedad-valor.

Css("propiedad","valor") .css((propiedad1: "valor1", "propiedad-2": "valor2"))

Usaremos el método. css(), tal como usamos .addClass(): los combinamos con un selector y vinculamos el evento. Veamos el método .css() usando un ejemplo específico. Necesitaremos el siguiente marcado HTML:

Y algo de CSS:

#textbox( borde: 1px sólido #000; fondo: #DFECFF; margen: 20px automático; alineación de texto: izquierda; relleno: 10px; ancho: 400px; color: #0000a0; estilo de fuente: cursiva; claro: ambos;)

Como resultado, tendremos una página como esta:

Hay dos botones en la página: aumentar y disminuir la fuente. En principio aquí podemos utilizar el método .addClass() descrito en el artículo anterior, pero compliquemos un poco la tarea e imaginemos que necesitamos reducir o aumentar el texto cada vez que pulsamos el botón correspondiente. Esto, por supuesto, se puede implementar describiendo una clase separada para cada clic, pero será mucho más fácil obtener el tamaño del texto actual y aumentarlo (disminuirlo) en un valor determinado.

Nuestro código tradicionalmente comienza con $(document).ready() y un controlador de eventos de botón $("#increase").click() :

$(documento).ready(función())( $("#aumento").click(función())( ))

A continuación, el tamaño de fuente se puede obtener fácilmente mediante $(“#textbox”).css("fontSize") . Sin embargo, el valor de retorno contendrá tanto el número como las unidades, por lo que debemos almacenar cada parte en su propia variable, después de lo cual podemos incrementar el número y volver a adjuntarle las unidades. Además, planeamos usar el objeto JQuery más de una vez, por lo que también sería una buena idea almacenarlo en una variable.

$(documento).ready(function() ( $("#increase").click(function() ( var $voz = $("div.speech"); var currentSize = $voz.css("fontSize") ; var num = parseFloat(currentSize, 10); var unit = currentSize.slice(-2); $speech.css("fontSize", num + unidad));

La primera línea dentro de la función .click() almacena una variable con el bloque #textblock.

Tenga en cuenta que utilizamos el símbolo $ en el nombre de la variable $speech. Porque $ es un carácter válido para variables de javascript, podemos usarlo como recordatorio de que esta variable almacena un objeto JQuery. La siguiente línea guarda el tamaño de fuente del bloque #textblock en una variable, por ejemplo, 12px.

Después de eso usamos parseFloat() y slice() . La función parseFloat() se utiliza para convertir valores de cadena en valores numéricos (decimales). Por ejemplo, la cadena 12 se convertirá al número 12. Si la cadena comienza con un carácter no numérico, parseFloat() devolverá NaN, lo que significa: "No es un valor numérico" ( No un número).El segundo argumento de la función parseFloat() garantiza que el número se convertirá a un valor decimal.

El método .sice() devuelve una subcadena que comienza con cierto personaje líneas. Dado que el nombre de las unidades que estamos usando tiene dos caracteres (px), especificamos que la subcadena debe comenzar con los dos últimos caracteres de la cadena principal.

Todo lo que tenemos que hacer es multiplicar el valor resultante de la variable num por 1,4 y luego establecer el tamaño de fuente concatenando las dos variables num y unidad:

$(documento).ready(function())( $("#increase").click(function())( var $voz = $("#textbox"); var currentSize = $speech.css("fontSize" var num = parseFloat(currentSize, 10); var unidad = currentSize.slice(-2); $speech.css("fontSize", num + unidad));

Ahora, después de hacer clic en el botón "Agrandar", el texto en el bloque aumenta, como en la captura de pantalla presentada:

El siguiente clic en el mismo botón continúa aumentando el texto en el bloque.

Para que el botón "Reducir" funcione, dividiremos el valor de la variable - num/=1.4. Y para no aumentar el tamaño del código, podemos combinar dos controladores de eventos .click() en uno, a través de la clase de botón. Luego, después de configurar las variables, podemos multiplicar o dividir fácilmente según el ID del botón que se presionó. Así es como debería verse el código:

$(documento).ready(función())( $("input").click(función())( var $voz = $("#textbox"); var currentSize = $voz.css("fontSize") var num = parseFloat(currentSize, 10); var unit = currentSize.slice(-2); if (this.id=="increase")( num*=1.4; ) else if(this.id=="disminución) ") ( num/=1.4; ) $speech.css("fontSize", num + unidad ));

Lo anterior fue dado ejemplo más simple usando el método .css() en la práctica. Se puede dar un ejemplo más del uso de este método.

Separar elementos del menú

Muy a menudo, en el diseño existe una técnica como dividir los elementos del menú con una línea vertical, y el primer y último elemento del menú no deben tener una línea lateral.

Dicho menú requerirá el siguiente marcado HTML:

Ul( estilo de lista: ninguno; ) ul li( estilo de lista: ninguno; flotante: izquierda; fondo: #DFECFF; pantalla: bloque; relleno: 10px; borde derecho: 1px gris sólido; ) ul li a( texto- decoración: ninguna; color: #000;

Así será nuestro menú:

Y para eliminar el separador derecho del último elemento del menú (cuarto elemento), puede usar este código:

$(documento).ready(function())( $("#menu ul li:last").css("border-right", "none"); ));

Y como resultado, obtenemos este menú:

Como puede ver, usar este método es bastante simple y conveniente, pero trate de no abusar de él, utilícelo solo en los casos en que no sea posible agregar el estilo deseado al archivo CSS.