в реальном времени обновить стиль по умолчанию в CSS с пользовательским

Question

Есть ли способ добавить файл custom.css и в этом месте правило, которое принимает значения полей и отступов в пикселях исходного стиля style.css и делит их пополам или изменяет их на 50% или 75% от оригинал? или любой метод с помощью JavaScript?

Я пытаюсь как:

style.css

.text1{
    padding: 20px;
}
.text2{
    padding: 30px;
}

custom.css

html.*{ //all element with padding value
    padding: calc(50%);
}

Результат html:

<span class="text1">texto</span> //10px 
<span class="text2">texto</span> //15px

Answer 1

Демо 1 - это простой JavaScript, а Демо 2 - это jQuery. Demo 1 и Demo 2 будут применять любой динамически настроенный стиль к каждому <span>, но селектор может быть любым, чем CSS-селектор. Поэтому, если вы по-прежнему намереваетесь выбрать каждый тег, у которого есть отступы (не рекомендуется, это очень неэффективно):

"*[style*=padding]"

---

Оба они дают одинаковые результаты:

<span class="text1" style="padding: calc( paddingValue * 0.5);"></span>

---

Ниже приводится разбивка результатов:

< селектор style = " propertyName : calc( propertyValue valueAdjustment.operator valueAdjustment.value "></ селектор >

---

• селектор: Строка, использующая тот же синтаксис, что и селектор CSS или селектор jQuery.

  • (напр. <span></span> = "span" | напр. <div id="ID"></div> = "#ID")

• propertyName: Строка свойства CSS.

  • (напр. "padding-top") ?
• propertyValue: Строка CSS вычисленное значение
  • (напр. "30px")

• valueAdjustment: Литерал объекта, который хранит 2 свойства.

  • (напр. var adj= {...}

• valueAdjustment.operator: Первое свойство valueAdjustment - это строка простого математического оператора.

  • (напр. var adj = { o:"+", "-", "*" или "/"})

• valueAdjustment.value: Второе свойство valueAdjustment является строкой произвольного значения.

  • (напр. var adj = { v:"0.5"})

    ---

    ? Если вы используете простой JavaScript, не используйте сокращение propertyName s потому что каждый браузер обрабатывает данные из getComputedStyle() метод по-разному. JQuery не страдает от этого ограничения.
    • (например, padding должно быть padding-top, padding-bottom, padding-right, padding-left при использовании Демо 1 )

---

Демо 1

Простой JavaScript

function adjustStyle(selector, propertyName, valueAdjustment) {

  var nodes = Array.from(document.querySelectorAll(selector));

  nodes.forEach(function(node, idx, nodes) {

    var target = window.getComputedStyle(node, null);

    var propVal = target.getPropertyValue(propertyName);
console.log(propVal);
    var op = valueAdjustment.operator;

    var val = valueAdjustment.value;

    var rule = `${propertyName}: calc(${propVal} ${op} ${val});`;
    
    console.log(rule);

    node.style.cssText += `${rule}`;

  });
}



var adj = {
  operator: '*',
  value: '0.5'
};
adjustStyle('span', 'padding-top', adj);
adjustStyle('span', 'padding-bottom', adj);
adjustStyle('span', 'padding-right', adj);
adjustStyle('span', 'padding-left', adj);

span {
  outline: 3px dashed red;
}

.text1 {
  padding: 20px;
}

.text2 {
  padding: 30px;
}

<span class="text1">text</span>
<span class="text2">text</span>

Демо 2

JQuery

function adjustCSS(selector, propertyName, valueAdjustment) {

  $('span').each(function() {
  
    var propVal = $(this).css("padding");
    
    var op = valueAdjustment.operator;
    
    var val = valueAdjustment.value;
    
    $(this).css("padding", `calc(${propVal} ${op} ${val})`);
    
  });
  
}

var adj = {
  operator: '*',
  value: '0.5'
};

adjustCSS('span', 'padding', adj);

span {
  outline: 3px dashed red;
}

.text1 {
  padding: 20px;
}

.text2 {
  padding: 30px;
}

<span class="text1">text</span>
<span class="text2">text</span>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Как вы спросили, вот пример.

getComputedStyle() необходимо, потому что elem.style только для Inline-CSS.

В этом примере исходное значение padding делится на 2.

var a = document.querySelectorAll('*');

for (var i=0; i<a.length; i++) {
  if (window.getComputedStyle(a[i]).getPropertyValue('padding')) {
    a[i].style.padding = parseInt(window.getComputedStyle(a[i]).getPropertyValue('padding')) / 2 + 'px';
  }
}

console.log(window.getComputedStyle(document.querySelector('.fifty')).getPropertyValue('padding'));

div{padding:50px}
p{padding:100px}

<div class="fifty"></div>
<p class="hundred"></p>