如何在 React 中運用 CSS
3 回答
烙印99
TA貢獻1829條經驗 獲得超13個贊
CSS和網頁分離的好處是顯而易見的？那要看在什么時代。
從傳統 HTML 的觀點來看，“內容”（HTML）和其渲染方式 (CSS)是可以分離的，例如同樣的文章可以被CSS渲染到不同的設備上，例如PC、手機甚至是給視覺障礙的人用的聲音設備。基于內容傳播，這樣分隔就是合理的。
而
今天，Web已經從相互連接的HTML變成了相互連接的 Web App。用戶看到的已經不再是整個
HTML，而是由一個一個Web組件組成的應用程序窗口。此時，CSS的全局性帶來的就不是方便，而可能是污染了。為了解決這個問題，Web
Component 不得不帶來了 Shadow DOM 的新概念。
React Component是適應 Web App
化的，因此很自然，inline style 的作用自然就會被加強。在需要全局 CSS 的時候，你仍然可以通過為 React Component
設置 className 屬性，來制定對應的 CSS Class。
Inline style也有一些限制，只能通過 CSS 聲明（className）來實現，例如聲明偽類屬性 (a:visited)。
慕尼黑5688855
TA貢獻1848條經驗 獲得超2個贊
<html>
<head>
<meta charset="utf-8">
<title>exp</title>
<style>
p{
background-image:url(寫你的圖片url);
}
</style>
</head>
<body>
<p id="p"></p>
<a href="javascript:void(0);" onclick="hideImg()">點擊我隱藏</a>
<a href="javascript:void(0);" onclick="showImg()">點擊我顯示</a>
<a href=" 任意一個網站">網站名</a>
</body>
</html>
<script>
function hideImg(){
var p = document.getElementById("p");
p.style.backgroundImage = "";
}
function showImg(){
var p = document.getElementById("p");
p.style.backgroundImage = "url(寫你的圖片url)";
}
</script>
添加回答
舉報
0/150
提交
取消