html - para - lista de codigos css
¿Puedo aplicar un estilo CSS a un nombre de elemento? (7)
Actualmente estoy trabajando en un proyecto donde no tengo control sobre el HTML al que estoy aplicando estilos CSS. Y el HTML no está muy bien etiquetado, en el sentido de que no hay suficientes declaraciones de id y de clase para diferenciar entre elementos.
Por lo tanto, estoy buscando maneras de aplicar estilos a objetos que no tienen un id o atributo de clase.
A veces, los elementos de formulario tienen un atributo de "nombre" o "valor":
<input type="submit" value="Go" name="goButton">
¿Hay alguna manera de aplicar un estilo basado en name = "goButton"? ¿Qué pasa con el "valor"?
Es el tipo de cosa que es difícil de descubrir porque una búsqueda en Google encontrará todo tipo de instancias en las que términos amplios como "nombre" y "valor" aparecerán en las páginas web.
Sospecho que la respuesta es no ... ¿pero quizás alguien tiene un truco ingenioso?
Cualquier consejo sería muy apreciado.
¿Has explorado la posibilidad de usar jQuery? Tiene un modelo de selector de alcance muy similar (similar en sintaxis a CSS) e incluso si sus elementos no tienen ID, debe poder seleccionarlos usando parent -> child -> grandchild relationship. Una vez que los tiene seleccionados, hay una llamada a método muy simple (se me olvida el nombre exacto) que le permite aplicar estilo CSS a los elementos.
Debería ser fácil de usar y, como beneficio adicional, lo más probable es que sea compatible con muchas plataformas.
Ejemplo de entrada de texto
input[type=text] {
width: 150px;
}
input[name=myname] {
width: 100px;
}
Este es el trabajo perfecto para el selector de consultas ...
var Set1=document.querySelectorAll(''input[type=button]''); // by type
var Set2=document.querySelectorAll(''input[name=goButton]''); // by name
var Set3=document.querySelectorAll(''input[value=Go]''); // by value
A continuación, puede recorrer estas colecciones para operar con los elementos encontrados.
Para futuros googlers, FYI, el método en la respuesta de @meder, se puede usar con cualquier elemento que tenga un atributo de nombre, así que digamos que hay un <iframe> con el nombre xyz entonces puedes usar la regla como belows.
iframe[name=xyz] {
display: none;
}
El atributo de name se puede usar en los siguientes elementos:
-
<button> -
<fieldset> -
<form> -
<iframe> -
<input> -
<keygen> -
<map> -
<meta> -
<object> -
<output> -
<param> -
<select> -
<textarea>
Puede usar el selector de atributos, input[name="goButton"] { } . Tenga en cuenta que no es compatible con IE6.
Actualización: en 2016 puedes usarlos prácticamente como quieras, ya que IE6 está muerto. http://quirksmode.org/css/selectors/
Puede usar selectores de atributos pero no funcionarán en IE6 como dijo Meder, existen soluciones de javascript para eso. Verificar Selectivizr
Más detallado en los selectores de atributos: http://www.css3.info/preview/attribute-selectors/
/* turns all input fields that have a name that starts with "go" red */
input[name^="go"] { color: red }
Si entiendo tu pregunta en ese momento,
Sí, puede establecer el estilo del elemento individual si su id o nombre está disponible,
p.ej
si el ID está disponible, entonces puedes tener control sobre el elemento como,
<input type="submit" value="Go" name="goButton">
var v_obj = document.getElementsById(''goButton'');
v_obj.setAttribute(''style'',''color:red;background:none'');
De lo contrario, si el nombre está disponible, entonces puedes tener control sobre el elemento como,
<input type="submit" value="Go" name="goButton">
var v_obj = document.getElementsByName(''goButton'');
v_obj.setAttribute(''style'',''color:red;background:none'');