如何更改cshtml中Razor语法的背景颜色

huangapple go评论106阅读模式
英文:

How can I change background color of razor syntax in cshtml

问题

我想更改cshtml内的razor代码的背景颜色,以便在滚动时更快地识别它。我想更改整个文本,不仅仅是@。
如何做到这一点?
如何更改cshtml中Razor语法的背景颜色

英文:

I want to change the background color of razor code inside cshtml to recognize it faster when I'm scrolling. I want to change whole text not only @.
How can I do that?
如何更改cshtml中Razor语法的背景颜色

答案1

得分: 0

我终于解决了我的问题。我去到工具>选项>文本编辑器>HTML>高级,将传统剃刀编辑器更改为true。现在我得到了我想要的。

英文:

I finally solve my issue. I went to tools>options>Text Editor>HTML>Advanced and turn legacy razor editor to true. Now I have what I want.
如何更改cshtml中Razor语法的背景颜色

答案2

得分: -1

你可以使用 JavaScript 来更改背景颜色。

    @model MyViewModel

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>My Page</title>
        <style>
            body {
                background-color: white;
            }
            
            #content {
                /* 这里是您的内容样式 */
            }
        </style>
    </head>
    <body>
        <div id="content">
            <!-- 这里是您的动态内容 -->
        </div>
        
        <script>
            const content = document.getElementById("content");
            
            window.addEventListener("scroll", function() {
                if (window.pageYOffset > 0) {
                    content.style.backgroundColor = "lightblue";
                } else {
                    content.style.backgroundColor = "white";
                }
            });
        </script>
    </body>
    </html>

使用 Razor 语法生成页面的 HTML 和 CSS,包括一个用于动态内容的 #content div。然后,我们在页面底部添加一个 JavaScript 块,监听 "scroll" 事件并相应地更新 #content div 的背景颜色。

英文:

You can use javascript to change the background color.

 @model MyViewModel

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>My Page</title>
    <style>
        body {
            background-color: white;
        }
        
        #content {
            /* your content styles here */
        }
    </style>
</head>
<body>
    <div id="content">
        <!-- your dynamic content here -->
    </div>
    
    <script>
        const content = document.getElementById("content");
        
        window.addEventListener("scroll", function() {
            if (window.pageYOffset > 0) {
                content.style.backgroundColor = "lightblue";
            } else {
                content.style.backgroundColor = "white";
            }
        });
    </script>
</body>
</html>

use Razor syntax to generate the HTML and CSS for the page, including a #content div for our dynamic content. Then, we add a JavaScript block to the bottom of the page that listens for the "scroll" event and updates the background color of the #content div accordingly.

huangapple
  • 本文由 发表于 2023年3月9日 15:11:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/75681433.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定