попробуйте получить доступ к xhr.responseXML вместо responseText
. Он должен дать вам документ, по которому вы можете выполнять запросы.
Если это не сработает, вместо создания узла DOM вы можете использовать DOM Parser для анализа ответа, например:
const parser = new DOMParser()
const parsedDoc = parser.parseFromString(xhr.responseText, 'text/html')
// now you can use the parsedDoc like a regular document
var translations = parsedDoc.getElementsByClassName("...")
спецификация CSS дает пример выполнения просто этого. К сожалению, в то время как это работает над Firefox 3, это, кажется, не работает над IE7:
<html>
<head>
<style>
ol { counter-reset: item; }
ol li { display: block; }
ol li:before {
content: counter(item) ". ";
counter-increment: item;
color: red;
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
Не уверенный, если это работает, но я думаю, что это должно:
<li style='color: red;'><span style='color:black;'>test</span></li>
редактирование
, Если Вы не можете отредактировать HTML затем, я боюсь, что это не возможно. Если Вы могли бы добавить JavaScript к HTML (однажды в голове) затем, Вы могли сделать это как это:
$(document).ready( function() {
$('ol li').wrapInner('<span class="black"> </span>').addClass('red');
});
Вам будет нужна библиотека jQuery для этого.
Затем в Вашем CSS просто настраивает красный и черный класс с color:red/black объявлениями.
Это должно сделать то, что Вы ищете:
http://archivist.incutio.com/viewlist/css-discuss/67894
HTML
<ol>
<li>1 some text here</li>
<li>2 some more text that can span longer than one line</li>
</ol>
CSS
ol { list-style: none; padding-left: 2em; text-indent: -1em;}
li:first-letter { float: left;
font-size: ??;
color: white;
background: orange;
line-height: 1.0; }
Кроме Вы захотите изменить цвет и фон согласно Вашему дизайну.
Этот следующий является излишеством, но дает Вам большую информацию о как к спискам стилей:
http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/
-Adam
От ответа до подобный вопрос я нашел в другом месте:
Так же, как примечание стороны, CSS3 позволит легкое моделирование маркеров списка с:: псевдоэлемент маркера.
, Но на данный момент похоже, что необходимо было бы добавить <span>
к HTML.
Для расширения немного на том, что другие сказали, а также дополнительные разъяснения вопроса нет никакого встроенного способа сделать это из CSS w/o касание HTML. Если бы Вы надеетесь сохранять HTML максимально чистым и семантическим, я сделал бы моделирование с помощью JavaScript, вероятно, с библиотекой как jQuery, для корректировки DOM так, чтобы CSS могла быть более эффективной.
я предостерег бы, однако, с помощью цвета для передачи информации. Я не уверен, какова цель цветных чисел, но использующий цвет для отображения информацию упускает страдающих дальтонизмом пользователей из цикла и большое нет не для доступности.
Это легко, пока Вы не хотите присваивать различные цвета различным числам элемента списка. Никакие необходимые модификации HTML. Не мог бы работать в 100% браузеров хотя..
ol {color:red;}
ol li {color:black;}