javascript 内容占位符问题中的第二个 css答案

【问题标题】：second css in content placeholder problem with javascriptjavascript 内容占位符问题中的第二个 css
【发布时间】：2011-03-07 03:30:20
【问题描述】：

这可能有点令人困惑，但它就是这样。

我有一个名为 UserProfile.master 的母版页，它有一个链接到 UserProfileWall.aspx 的内容占位符，现在我试图在 userprofilewall 页面中加载一些 javascript 和第二个 css 文件，但是当我向 css 文件添加第二个链接时，它会搞砸母版页上的所有内容。我不能将 css 链接放在 userprofilewall contentplaceholder 中，因为它说链接不能嵌套在 div 表中，这将我带到了 javascript 和 div 表。

java 脚本只是运行一个按钮单击事件，用于将文本区域中的文本添加到 div 中。但由于某种原因它不起作用。不是没有第二个 css

这是我想在第二个 css 中插入的内容：

div{
    width:400px;
    height:400px;
    border:1px solid red;
    padding:10px;
    margin-top:10px;
}

到目前为止我的整个用户资料墙的代码

<%@ Page Title="" Language="C#" MasterPageFile="~/UserProfile.master" AutoEventWireup="true" CodeFile="UserProfileWall.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link href="css/Style.css" rel="stylesheet" type="text/css" />

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $('button').click(function () {
        var x = $('textarea').val();
        $('div').html(x);
    });
        </script>
<textarea style="border: 0" cols="77" rows="5"></textarea>
<button>Post Message</button>

<div></div>

</asp:Content>

如何修复 javascript 或将 css 修复到我的 userprofilewall 中，以便 javascript 可以使用它

【问题讨论】：

标签： java javascript jquery asp.net css

【解决方案1】：

首先，我需要修复 Javascript 以在 $(document).ready() 调用中添加按钮单击处理程序，而不是作为内联脚本代码。这解决了“发布消息”按钮问题。接下来，如何处理div的样式变化...

现在，我添加了一个 .css() 调用来设置您在点击处理程序中内联问题中定义的 css 属性，但您可能希望将这些 css 属性移动到单个 CSS 规则中并使用 @987654327 @和.removeClass()

这里有一些链接可以查看我所做的更改：

这是我用来修复 JS 和 CSS 问题的源代码，来自我从您的源代码创建的静态 HTML 页面。希望对您有所帮助。

<html>
<head>
   <link href="css/Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('button').click(function () {
        var x = $('textarea').val();
        $('div').html(x);
        $('div').css({width:"400px",height:"400px",border:"1px solid red",padding:"10px","margin-top":"10px"});
        // or $('div').addClass('name of css rule with above css props');
        // or $('div').removeClass('name of css rule with above css props');
    });
});
</script>
<textarea style="border: 0" cols="77" rows="5"></textarea>
<button>Post Message</button>
<div></div>
</body>
</html>

【讨论】：