Nano Hash - криптовалюты, майнинг, программирование

Программно добавить стиль nth-child

Я хочу следовать схеме, изложенной в этот блог, в котором используются следующие правила CSS, чтобы указать, где должны отображаться элементы:

.items li { 
  position: absolute; top: 0; left: 0;
}
.items li:nth-child(1)  { transform: translate3d(0, 0%, 0); }
.items li:nth-child(2)  { transform: translate3d(0, 100%, 0); }
.items li:nth-child(3)  { transform: translate3d(0, 200%, 0); }

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

Я пробовал разные подходы, но не могу понять, как программно добавлять такие правила стиля динамически. Любая помощь приветствуется. Я пишу приложение на Dart, но решение Javascript также приветствовалось бы.

Обновить

См. Ниже принятый ответ, который направил меня на правильный путь. Он использует jquery, поэтому я включил ниже версию для всех, кто, как я, использует Dart. В версии Dart используется Как динамически добавлять таблицу стилей с помощью Dart?, который я только что нашел - не знаю, как пропустил раньше. Спасибо всем за помощь.

import 'dart:html' as Html;
void main(){
  Html.StyleElement styleElement = new Html.StyleElement();
  Html.document.head.append(styleElement);
  Html.CssStyleSheet sheet = styleElement.sheet;
  final rule = 'div { border: 1px solid red; }';
  sheet.insertRule(rule, 0);
}
dart javascript html
03.09.2015

  • этот шаблон столь же статичен, как кажется? может вообще не быть причин делать это в javascript. вы слышали о sass / scss / less? Браузеры не любят модификации стиля. упомянутые инструменты упрощают создание стилей. 03.09.2015
  • Я не использовал sass / scss или меньше, но насколько я могу судить, они здесь не делают то, что мне нужно. Основная проблема заключается в том, что мне нужен стиль для каждого из неизвестного количества элементов списка, поэтому мне нужно добавлять стиль каждый раз, когда я добавляю элемент в список. Я не думаю, что sass / scss или less поможет с этим? 03.09.2015
  • хорошо. scss позволяет вам определить шаблон css, который вы хотите сгенерировать, и вы можете выполнить его x раз, просто передав константу. вы можете установить константу равной 2000. Таким образом, javascript не будет выполняться вообще, и ваш браузер будет доволен, потому что загрузка стилей будет загружаться + кешировать один раз. изменение стилей наверняка заставит браузер переделать макет, чего вы хотите избежать любой ценой. 04.09.2015

Ответы:


1

Вам нужно получить таблицу стилей и добавить к ней CSS-правило.

addChild = function(i) {
  var styleSheet = document.styleSheets[0];
  var rule = '.items li:nth-child(' + i + ')  { transform: translate3d(0, ' + (i*100) + '%, 0); }';
  styleSheet.insertRule(rule, 1);
}

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

Дополнительную информацию см. здесь.

03.09.2015
  • Спасибо - это было то, что я искал или, по крайней мере, помог мне встать на верный путь. Я собираюсь отметить это как принятый ответ, но см. Мою правку выше, в которой излагается решение Dart и ссылка на другой вопрос о stackoverflow, который также имеет дело с ним. Не знаю, почему раньше не нашел - поискал. В любом случае, большое спасибо за помощь. 04.09.2015

    • 2

    Я не совсем уверен, что вы ищете, но этот jsfiddle использует jQuery для циклического перебора каждого элемента списка, который у вас есть, и добавляет соответствующий CSS с шагом 100%.

    http://jsfiddle.net/2ub4hj1o/

    Вот файл jquery.

    $(document).ready( function() {
$('.items li').each( function(i){
   var child = i + 1;
    var trans = i + "00%";
    var cssval = 'translate3d(0, ' + trans + ', 0)';
    $(this).css('transform',cssval);
});
});

    Это все, что вам сейчас нужно для CSS.

    .items li { 
  position: absolute; top: 0; left: 0;
}

    ОБНОВЛЕНИЕ

    Если вы также пытаетесь добавить или удалить их динамически, вот для этого jsfiddle. Обратите внимание, что я убрал стили CSS translate3d и position: absolute, потому что гораздо проще добавлять элементы динамически, если положение относительное. Если вы ищете что-то другое, дайте нам знать. :)

    http://jsfiddle.net/2ub4hj1o/1/

    03.09.2015
  • Спасибо - вторая версия близка к тому, что я хочу, потому что она обрабатывает динамическое добавление элементов. Translate3d и относительные позиции важны (см. Упомянутую мною статью, которая, на мой взгляд, весьма интересна), но я уверен, что ваше предложение можно легко адаптировать для включения этих аспектов. Однако я действительно ищу решение без jquery (извините, я должен был это сказать). 04.09.2015
  • Без проблем! Я рад, что ты нашел то, что искал. Просто для удовольствия вы также можете взглянуть на JQuery sortable, если вы когда-нибудь в конечном итоге будете использовать JQuery. Это похоже на то, что делает этот пример. jqueryui.com/sortable 15.09.2015

    • 3
  • Этот подход, вероятно, сработает, но мне нужно решение без jquery (я должен был это сказать). 04.09.2015
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..