Форум

nastya97core · #1 (**permalink**) 21.03.2021, 15:16

Здравствуйте. Есть вот такие исходные данные

Код:

.head-line {
font-size: 24px;
color: #000000;
width: 600px;
...
height: 400px;
}

Нужно px перевести в vw. Опустим "сложные" арифметические расчёты. Короче говоря, нужно px поделить на 12.8. То есть на выходе я хотела получить вот такое:

Код:

.head-line {
font-size: 1.875vw;
color: #000000;
width: 46.875vw;
...
height: 31.25vw;
}

Скажите, возможно ли вообще такое?
найти строки, которые заканчиваются на px, получить числа, которые стоят перед px, поделить из и изменить px на vw.

рони · #2 (**permalink**) 21.03.2021, 16:26

nastya97core,
шифровка из центра ...

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
.head-line {
font-size: 24px;
color: #000000;
width: 600px;
height: 400px;
background-color: #BDB76B;
}
    </style>
    <script>
document.addEventListener("DOMContentLoaded", function() {
    function replaceCss(k, n) {
        for (var f = document.styleSheets, c = 0; c < f.length; c++) {
            var rule = "";
            for (var b = f[c].cssRules, a = 0; a < b.length; a++) {
                if (b[a].selectorText == k) {
                    b[a].cssText.replace(/(\S+)\s*:\s*(\d+)px/g, function(a, p, num) {
                        rule += p + ": " + ((num / n).toFixed(3) + "vw; ");
                    });
                }
            }
            if (rule) {
                f[c].insertRule(k + " {" + rule + "}", 1);
            }
        }
    }
    replaceCss(".head-line", 12.8);
})
    </script>
</head>
<body>
<div class="head-line"></div>
</body>
</html>

nastya97core · #3 (**permalink**) 21.03.2021, 18:21

Круто, работает. Правда не совсем то)))

Я пытаюсь переписать под себя, а у меня не выходит. В исходе строка:

var line = ".head-line {
font-size: 24px;
color: #000000;
width: 600px;
height: 400px;
background-color: #BDB76B;
}";

То есть это не живой стиль, а лишь строки.

рони · #4 (**permalink**) 21.03.2021, 18:35

Сообщение от nastya97core

Я пытаюсь переписать под себя,

строка 22 это всё что вам нужно

рони · #5 (**permalink**) 21.03.2021, 18:41

nastya97core,

<script>
var line = `.head-line {
font-size: 24px;
color: #000000;
width: 600px;
height: 400px;
background-color: #BDB76B;
}`;
line = line.replace(/(\d+)px/g, (a,b) => `${(b / 12.8).toFixed(3)}vw`);
document.write(line)

</script>

Форум

Справочник

Discord чат

Курсы javascript