使用自定义

Question

是否有任何方法可以添加custom.css文件，并在此处放置一个规则，该规则采用原始style.css的px中的边距和填充值，并将它们分成两半或将其更改为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

正如你在这里问的那样是一个例子。

getComputedStyle() is needed, because elem.style is only for Inline-CSS.

使用此示例，您将原始padding值除以2。

＆＃13;

＆＃13;

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'));

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

演示1 是纯JavaScript，演示2 是jQuery。 演示1 和演示2 会将任何动态调整的样式应用于每个<span>，但选择器可以是CSS选择器的任何内容。因此，如果您仍然打算选择每个具有填充的标记（不会建议它，那么效率非常低）：

"*[style*=padding]"

<小时/> 它们都给出了相同的结果：

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

以下是结果的细分：

< 选择 style = " propertyName : calc( propertyValue valueAdjustment.operator 的 valueAdjustment.value "></的选择 >

• selector：使用与CSS选择器或jQuery选择器相同语法的String。

  • （例如<span></span> = "span" |例如<div id="ID"></div> = "#ID" ）

• propertyName： CSS属性的字符串。

  • （例如 "padding-top" ）
• propertyValue： CSS 计算值的字符串
  • （例如 "30px" ）

• valueAdjustment：存储2个属性的Object Literal。

  • （例如var adj = {...}

• valueAdjustment.operator： valueAdjustment 的第一个属性是一个简单数学运算符的字符串。

  • （例如var adj = { o: "+"，"-"，"*"或"/" }）

• valueAdjustment.value： valueAdjustment 的第二个属性是任意值的字符串。

  • （例如var adj = { v: "0.5" }）

    <小时/>  如果使用纯JavaScript，请不要使用简写propertyName 因为每个浏览器都处理来自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>