Изменение пользовательских атрибутов CSS без Javascript?

Итак, я немного редактирую вики, и, к сожалению, Javascript не включен. Поэтому мне нужна помощь гуру CSS!

Насколько я понимаю, вы можете добавить собственный HTML-атрибут следующим образом:

<span id="some-id" custom_attr="no"></span>

И вы можете стилизовать элементы с помощью custom_attr следующим образом:

span[custom_attrib] { /* styling here */ }

Теперь, есть ли способ редактировать атрибут HTML внутри CSS?

Пример (который, конечно, не работает..):

<!------------- CSS ------------>
<style>
  .some-class {
    /* Original code here */
  }
  .some-class[custom_attr = "yes"] {
    /* Change code here */
  }

  #some-id:hover ~ .some-class[custom_attr = "no"] {
    custom_attr : "yes";
  }
</style>

<!------------- HTML ------------>
<html>
...
<span id="some-id">...</span>
<span class="some-class" custom_attr="no">...</span>
...
</html>

html css pseudo-class
person Jacob Bridges    schedule 15.11.2013    source источник
comment
нет, вы не можете изменить атрибут с помощью CSS   -  person DaniP    schedule 15.11.2013

Ответы (2)


arrow_upward
7
arrow_downward

Конечно, вы можете редактировать HTML с помощью CSS!

Из вашего примера кода похоже, что вы хотите изменить «Нет» на «Да», когда пользователь hovers на нем. Вот как:

http://jsfiddle.net/ENZQU/

<a default="YES" mouseover="NO"></a>

a {
    font-size: 3em;
}
a:after {
    content: attr(default);
}
a:hover:after {
    content: attr(mouseover);    
}

Вы хотели это на click вместо этого? Легко!

http://jsfiddle.net/ENZQU/1/

<input id="cbox" type="checkbox">
<label for="cbox"></label>

#cbox {
    display: none;
}
label {
    font-size: 3em;
}
label:after {
    content: "YES"
}
#cbox:checked + label:after {
    content: "NO"
}

Однако я настоятельно рекомендую вам найти другой способ сделать это. Вики не хочет, чтобы вы динамически меняли что-то на странице, и, вероятно, она построена таким образом не просто так.

person MattDiamant    schedule 15.11.2013
comment
Вы также можете добавить состояние переключения клика через :focus при условии, что вы добавите атрибут tabindex в HTML: jsfiddle.net /shshaw/ENZQU/4 - person shshaw; 16.11.2013

arrow_upward
4
arrow_downward

К сожалению, вы не можете изменить свой HTML-код с помощью CSS, вы можете сделать это только с помощью JavaScript.

Энди Дэвис предложила эту функцию CSS в своем личном блоге. Я думаю, что это действительно интересное предложение. Вы можете увидеть и присоединиться к обсуждению, созданному Энди Дэвисом здесь.

введите здесь описание изображения

CSS 3 потрясающий, как мы можем знаете, не будет ли в ближайшем будущем CSS чего-то подобного?

Вопрос:

Вы действительно не можете использовать JavaScript на своей странице? Это единственный способ изменить свой HTML-код, CSS просто стилизует HTML.

Вы можете быть уверены в том, что в W3C есть люди, которые "разрабатывают Интернет".

person Paladini    schedule 15.11.2013
comment
Спасибо за ваш ответ. Я знаю, что CSS предназначен только для стилизации. Но люди сделали удивительные вещи с помощью чистого CSS, включая выпадающие меню и документы с вкладками. Псевдокласс hover великолепен, но, к сожалению, нет способа изменить состояние по щелчку мыши. - person Jacob Bridges; 16.11.2013
comment
Тем не менее, @Jacob-IT, CSS 3, как вы сказали, действительно потрясающий. Я не могу дождаться CSS 4. Чтобы узнать, на что способны креативность и CSS 3, перейдите по этой ссылке: muktware.com/2013/11/developer-creates-simpsons-entirely-css/ - person Paladini; 16.11.2013
comment
Отредактировал ответ, надеюсь, это поможет вам больше. - person Paladini; 16.11.2013