將Javascript匯入CSS

div
{
  width: 100px;
  height: 50px;
  background-color: blue;
}

div::after
{
position: inline-block;
  content: "Something";
 }

<div>

</div>

嗨，可以將 JS 函式匯入 CSS 嗎？

假設我有一個 JS 函式

funtion mytitle()
{
return "Something";
}

是否可以將此功能插入到 CSS 的內容中，而不是像我在代碼段中那樣對其進行硬編碼？我的意思是

div::after
{ content: mytitle();
}

uj5u.com熱心網友回復：

不，你不能這樣做。您必須使用前處理器將變數/函式傳遞給樣式。

uj5u.com熱心網友回復：

答案是否定的，你不能將 JavaScript 函式匯入 CSS

uj5u.com熱心網友回復：

您正在嘗試以相反的方式執行此操作 - 您可以通過 JavaScript 更改 CSS，而不是將 JavaScript 匯入 CSS。

但是你想修改一個偽元素，這是 JavaScript 做不到的。因此，您可以將 CSS 寫入檔案以覆寫之前的 CSS。

請注意，不建議將 CSS 寫入檔案，而是應該改變方法，例如添加另一個元素而不是偽元素。以下僅供參考如何通過 JavaScript 進行操作。

function changeCSS() {
  document.documentElement.innerHTML  = '<style>div::after{content: "asdf";}</style>';
}

div
{
  width: 100px;
  height: 50px;
  background-color: blue;
}

div::after
{
position: inline-block;
  content: "Something";
 }

<div>

</div>
<button onclick="changeCSS();" type="button">Click</button>

uj5u.com熱心網友回復：

沒有。CSS 呼叫 JS 時沒有語法。

您可以使用<script>元素將 JS 加載到 HTML 檔案中，然后該 JS 可以訪問檔案的樣式表并修改它們。

Array.from(document.styleSheets).forEach(css => {
  Array.from(css.cssRules).forEach(rule => {
    if (rule.selectorText === "div::after") {
      rule.style.setProperty('content', '"foo"');
    }
  });
});

div {
  width: 100px;
  height: 50px;
  background-color: blue;
}

div::after {
  position: inline-block;
  content: "Something";
}

<div>

</div>

請注意，這'"foo"'不是"foo"因為 CSS 值需要其中的引號。

uj5u.com熱心網友回復：

不，我們做不到，但我們可以使用Lesscss實作相同的結果 ，我們可以使用一些內置函式，但我們不能撰寫自己的函式。

uj5u.com熱心網友回復：

答案是否定的，但有一種變通方法可以實作這一目標。通過使用屬性在元素中顯示::after內容。

在下面的HTML代碼中，我們使用了 data-content屬性，其中顯示了 jQuery 方法的內容回傳值。

<div data-content=""></div>

在 CSS 中，將內容靜態content: "Something";值替換為動態屬性值content: attr(data-content);。

div::after {
  content: attr(data-content);
}

現在，只需撰寫一個簡單的 jQuery 方法來回傳data-content屬性中的值。

function mytitle() {
  $('div').attr("data-content", "Something change");
}

mytitle();

上面提到的所有更改都已在下面的代碼片段中實作。我希望它會幫助你。謝謝

function mytitle() {
  $('div').attr("data-content", "Something change");
}

mytitle();

div {
  width: 100px;
  height: 50px;
  background-color: blue;
}

div::after {
  content: attr(data-content);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-content=""></div>

uj5u.com熱心網友回復：

您可以為此使用CSS 自定義屬性。創建了一個片段，我只是通過 JS 更新第二個元素的文本。您可以根據自己喜歡的元素數量執行此操作。

function mytitle() {
  document.querySelector('.demo').style.setProperty('--some-text', '"My 2nd Value"');
}

mytitle();

div {
  width: 100px;
  height: 50px;
  background-color: blue;
  --some-text: 'Hello World';
  margin: 10px 0;
}

div::after {
  position: inline-block;
  content: var(--some-text);
}

<div>

</div>

<div class="demo">

</div>

uj5u.com熱心網友回復：

您可以使用額外的 Javascript 和document.querySelector()

例如，

<div id="title">
</div>

function myTitle(){
    element = document.querySelector('#title')
    element.innerHTML = "Something"
}

標籤：javascript html css 反应

上一篇：js點擊事件處理，比如計數器

下一篇：“page-break-after”屬性中“left”和“right”的值有什么作用？