CSS不能在asp.net C＃中工作？

Question

我有三個文件html ， css ， javascript我的css無法正常工作。我不知道為什么嗎？ 這是我的aspx代碼：

<asp:Content ID="Content2" ContentPlaceHolderID="body" Runat="Server">
<form id="form" runat="server">
<div id="editor" contenteditable="true" runat="server"></div>
<br />
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</form>
</asp:Content>

這是StyleSheet.css

#editor {
width: 100px;
height: 500px;
background-color:#444;
color: white;
font-size: 14px;
font-family: monospace;
display: block;
}
.statement {
color: #00FF00;
} 

這是JScript.js

$(function () {
$("div[ID$='editor']").on("keydown keyup", function (e) {
    if (e.keyCode == 32) {
        var text = $(this).text().replace(/[\s]+/g, " ").trim();
        var word = text.split(" ");
        var newHTML = "";

        $.each(word, function (index, value) {
            switch (value.toUpperCase()) {
                case "SELECT":
                case "FROM":
                case "WHERE":
                case "LIKE":
                case "BETWEEN":
                case "NOT LIKE":
                case "FALSE":
                case "NULL":
                case "FROM":
                case "TRUE":
                case "NOT IN":
                    newHTML += "<span class='statement'>" + value + "&nbsp;</span>";
                    break;
                default:
                    newHTML += "<span class='other'>" + value + "&nbsp;</span>";
            }
        });

        $(this).html(newHTML);

        //// Set cursor postion to end of text
        var child = $(this).children();
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStart(child[child.length - 1], 1);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
        $(this)[0].focus();
    }
  });
 });

在Masterpage.master中，這是StyleSheet.css和JScript.js鏈接：

<link rel="stylesheet" href="StyleSheet.css" type="text/css" />
<script type="text/javascript" src="JScript.js"></script> 

div高度，寬度，背景色不變。

Answer 1

由於它是運行服務器，因此ID會更改，因此可以將ClientIDMode更改為static以使其可預測，但更好的做法是：將CssClass添加到控件中。

Answer 2

您已經使div runat="server"可以將div的ID更改為ContentPlaceHolder因此在頁面中將找不到#editor 。

要么做一個class中css和分配class的div或組ClientIDMode="static"的div所以它的id作為您設置保持不變。

.editor {
width: 100px;
height: 500px;
background-color:#444;
color: white;
font-size: 14px;
font-family: monospace;
display: block;
}

<div id="editor" calss="editor" contenteditable="true" runat="server"></div>

或在div上添加ClientIDMode="static

<div id="editor" calss="editor" contenteditable="true" runat="server"  ClientIDMode="static"></div>

Answer 3

只需放在div“ clientidmode = Static”中使用以下代碼

#editor {
 width: 100px;
 height: 500px;
 background-color:#444;
 color: white;
 font-size: 14px;
 font-family: monospace;
 display: block;
}

<div id="editor" clientidmode="Static" runat="server"></div>

嘗試這個 。 它對我來說很完美

Answer 4

如果您不使用ClientIDMode而不添加它，它將起作用，無需更改div，只需復制以下CSS：

您的div：

<div id="editor" contenteditable="true" runat="server">Lorem Ipsum</div>

我還最后添加了渲染的Div

  div[id$='editor'] { width: 100px; height: 500px; background-color: #444; color: white; font-size: 14px; font-family: monospace; display: block; } 

 <DIV id="ContentPlaceHolder1_editor" contentEditable="true">Lorem Ipsum</DIV> 

希望這會幫助你。