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

0

Итак, я делаю редактирование вики, и, к сожалению, 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>
  • 0
    нет, вы не можете изменить attr с помощью CSS
  • 0
    Now, is there a way to edit the HTML attribute inside the CSS? Нет.
Теги:
pseudo-class

2 ответа

7

Конечно, вы можете редактировать 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"
}

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

  • 1
    Вы также можете добавить состояние переключения клика через :focus если вы добавите атрибут tabindex в HTML: jsfiddle.net/shshaw/ENZQU/4
4

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

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

Изображение 174551

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


Вопрос:

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

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

  • 0
    Спасибо за ваш ответ .. Я знаю, что CSS только для стиля. Но люди сделали некоторые удивительные вещи с чистым CSS, включая выпадающие меню и документы с вкладками. hover псевдо-класс Удивительно, но , к сожалению , нет никакого способа изменить состояния при щелчке мыши.
  • 0
    Тем не менее, @ Jacob-IT, CSS 3, как вы сказали, действительно потрясающий. Я не могу дождаться CSS 4. Просто чтобы узнать, что могут сделать креатив и CSS 3, посмотрите эту ссылку: muktware.com/2013/11/developer-creates-simpsons-entirely-css/…
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню