Могу ли я применить стиль CSS к имени элемента?

В настоящее время я работаю над проектом, в котором у меня нет контроля над HTML, к которому я применяю стили CSS. И HTML не очень хорошо помечен, в том смысле, что недостаточно идентификаторов id и классов для различения элементов.

Итак, я ищу способы применения стилей к объектам, которые не имеют атрибута id или class.

Иногда элементы формы имеют атрибут "имя" или "значение":

<input type="submit" value="Go" name="goButton">

Есть ли способ применить стиль на основе name= "goButton"? Как насчет "ценности"?

Это то, что трудно найти, потому что поиск Google найдет всевозможные экземпляры, в которых на веб-страницах появятся широкие термины, такие как "имя" и "значение".

Я как бы подозреваю, что ответ - нет... но, возможно, у кого-то есть умный хак?

Приветствуются любые советы.

Ответы

Ответ 1

Вы можете использовать селектор атрибута,

input[name="goButton"] {
  background: red;
}

<input name="goButton">

Ответ 2

Пример ввода текста

input[type=text] {
  width: 150px;
}

input[name=myname] {
  width: 100px;
}

<input type="text">
<br>
<input type="text" name="myname">

Ответ 3

Вы можете использовать селектор атрибутов, но они не будут работать в IE6, как сказал медикер, есть обходные методы javascript для этого tho. Проверьте Selectivizr

Более подробно о селекторах атрибутов: 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 }

Ответ 4

Для будущих googlers, FYI, метод в ответе @meder, может использоваться с любым элементом, который имеет атрибут имени, поэтому давайте скажем, что с именем xyz, вы можете использовать правило как belows.

iframe[name=xyz] {    
    display: none;
}

Атрибут name может использоваться для следующих элементов:

<button>
<fieldset>
<form>
<iframe>
<input>
<keygen>
<map>
<meta>
<object>
<output>
<param>
<select>
<textarea>

Ответ 5

Если я правильно понимаю ваш вопрос,

Да, вы можете установить стиль отдельного элемента, если его идентификатор или имя доступны,

например.

Если идентификатор доступен, тогда вы можете получить контроль над элементом типа <,

<input type="submit" value="Go" name="goButton">

var v_obj = document.getElementsById('goButton');

v_obj.setAttribute('style','color:red;background:none');

else, если имя доступно, тогда вы можете получить контроль над элементом типа <,

<input type="submit" value="Go" name="goButton">

var v_obj = document.getElementsByName('goButton');

v_obj.setAttribute('style','color:red;background:none');

Ответ 6

Использование [name=elementName]{} без тега также будет работать. Это повлияет на все элементы с этим именем.

Например:

[name=test] {
  width: 100px;
}

<input type=text name=test>
<div name=test></div>

Ответ 7

Это идеальная работа для селектора запросов...

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

Затем вы можете пройтись по этим коллекциям, чтобы обработать найденные элементы.

Ответ 8

Вы изучили возможность использования jQuery? Он имеет очень доступную селекторную модель (похожую на синтаксис CSS), и даже если у ваших элементов нет идентификаторов, вы должны иметь возможность выбирать их, используя отношения parent → child → grandchild. После того, как вы их выбрали, есть очень простой вызов метода (я забыл точное имя), что позволяет применять стиль CSS к элементу (элементам).

Он должен быть простым в использовании и в качестве бонуса, вы, скорее всего, будете очень кросс-платформенным.