ASP.NET中直接用C# 動態修改CSS樣式

阿新 • • 發佈：2019-01-20

wonsoft （[email protected]）

　　使用JavaScript控制CSS樣式有點麻煩，還是覺得直接使用C#操作更方便快捷，本文通過兩個Button控制TextBox1的高度和背景色，以展示通過C#控制CSS樣式的方法。以下是操作的例項：

　　一、前端程式碼（TestEditStyle.aspx.）如下：

<%@ Page Language="C#"AutoEventWireup="true" CodeFile="TestEditStyle.aspx.cs"Inherits="Test_TestEditStyle" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<formid="form1" runat="server">

<div>

<asp:Button ID="Button1" runat="server"Text="Button" onclick="Button1_Click" />

<asp:Button ID="Button2" runat="server"Text="Button" onclick="Button2_Click" />

<asp:TextBox ID="TextBox1"runat="server"></asp:TextBox>

</div>

</form>

</body>

</html>

二、後臺程式碼（TestEditStyle.aspx.cs

）如下：

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

public partial class Test_TestEditStyle :System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void Button1_Click(object sender, EventArgs e)

{

TextBox1.Style["background-color"] = "blue";　//背景設為藍色　

TextBox1.Style["height"] = "200px";　　　　　//高度設為200

}

protected void Button2_Click(object sender, EventArgs e)

{

TextBox1.Style["background-color"] = "red";　　//背景設為紅色　

TextBox1.Style["height"] = "100px";　　　　　 //高度設為100

}

三、補充說明：

　　只要在標籤里加上runat ="server"和ID="MyTag"，就可在後臺程式碼中直接通過設定MyTag.Style的值來控制樣式。　　例如：

　　在前端加入：　

　　後臺即可以直引用mydiv這個對像進行控制：　

mydiv.Style["width"] = "100px";

mydiv.Style["height"] = "100px";

mydiv.Style["background-color"] ="yellow";

ASP.NET中直接用C# 動態修改CSS樣式

ASP.NET中直接用C# 動態修改CSS樣式 wonsoft （[email protected]）　　使用JavaScript控制CSS樣式有點麻煩，還是覺得直接使用C#

javascript 動態修改css樣式

csdn 知識 net posit name 知識點顯示 span 部分方法一：改變外聯css文件，這裏不講這個。方法二：通過改變claaName來改變樣式，語法： obj.className = "style2"; //或者 obj.setAttribute(

javascript 動態修改css樣式方法匯總(四種方法)

tool geb code 標簽 AD java border nlog tro 在很多情況下，都需要對網頁上元素的樣式進行動態的修改。在JavaScript中提供幾種方式動態的修改樣式，下面將介紹方法的使用、效果、以及缺陷。 1、使用obj.className來修改樣

javascript 動態修改css樣式方法

CSS ? 1 2 3 4 5 6 7 .style1{margin:10px auto ;background-color:#9999FF; display

asp.net 在後臺給頁面動態新增Css樣式

在後臺給頁面新增Css樣式protectedvoid Page_Load(object sender, EventArgs e) {if (!Page.IsPostBack) {

Mvc多級Views目錄 asp.net mvc4 路由重寫及修改view 的尋找視圖的規則

目錄 for .net bool action htm 命名 resource 訪問規則一般我們在mvc開發過程中，都會碰到這樣的問題。頁面總是寫在Views文件夾下，而且還只能一個Controller的頁面只能寫在相應的以 Controller名命名的文件夾下。如果我們

動態修改css 規則

IT i++ insert spa keyframes IV 式表 find Oz 頁面引用了兩個樣式表： <link href="css/mui.min.css" rel="stylesheet" /> <link href="css/menu.cs

ASP.net Menu控制元件動態新增選單項實現許可權控制

對於動態選單生成，在很多具有許可權控制的專案中非常常見。最近遇到一個需求就是不同使用者具有不同許可權，該許可權是頁面級的，所以需要根據不同使用者的許可權情況動態生成選單項。首先，我把選單項中的內容先儲存在一個XML裡面，在載入模板頁時只需根據查詢

Asp.Net Ajax簡單測試動態顯示時間

利用Asp.net自帶的Ajax控制元件，實現簡單的動態顯示時間的頁面。前臺程式碼如下： <body> <form id="form1" runat="server"> <div> <asp:S

基於asp.net的web頁面動態控制元件建立以及使用

摘要： web設計中，有很多場合，頁面的控制元件要動態建立甚至只能動態建立，這樣可以增加頁面的靈活性，但是給程式設計師帶來了一些麻煩，比如要使用動態建立的控制元件，怎麼使用，都是要求解決的問題，

Asp.net 2.0 Treeview 動態填充,並實現無限級樹

{ //hooyesDataLink 為配置中資料連線字串鍵名 SqlConnection con =new SqlConnection(ConfigurationManager.AppSettings["hooyesDataLink"]); SqlDa

ASP.NET 2.0 中動態新增 GridView 模板列的例子

<%...@ Page Language="C#"%><%...@ Import Namespace="System.Data"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

asp.net 控制元件後臺動態新增樣式表

下面我來分享一下我通過做作業學會的一點技巧吧：滑鼠懸停變顏色效果： <div id="unameNot" class="txt-info" onmouseover="this.style.c

乾貨分享：ASP.NET CORE（C#）與Spring Boot MVC(JAVA)異曲同工的程式設計方式總結

目錄 C# VS JAVA 基礎語法類比篇：一、匿名類二、型別初始化三、委託（方法引用）四、Lambda表示式五、泛型六、自動釋放

【asp.net core】實現動態 Web API

序言：遠端工作已經一個月了，最近也算是比較閒，每天早上起床打個卡，快速弄完當天要做的工作之後就快樂摸魚去了。之前在用 ABP 框架（舊版）的時候就覺得應用服務層寫起來真的爽，為什麼實現了個 IApplicationService 的空介面就可以變成 Web API，可惜的是之前一直沒空去研究這一塊的原理及其實

一個檔案搞定Asp.net core 3.1動態頁面轉靜態頁面

最近一個Asp.net core專案需要靜態化頁面，百度查找了一下，沒有發現合適的。原因如下配置麻煩。類庫引用了第三方類，修改起來麻煩。有隻支援MVC，不支援PageModel。繼承ActionFilterAttribute類，只重寫了OnActionExecutionAsync，看似靜態化了，其實

jQuery動態改變css樣式

過時 css樣式劃過 jquery css 類方法 col 事件 log jQuery提供的事件類方法 - hover()。值得註意的是，hover()方法需要定義兩個函數，一個是鼠標劃過時；另一個是鼠標劃過後。$("#61dh a").css(‘color‘,‘#123

關於修改css樣式的幾種js用法

click sel 改變 border blue 實現 round document selector 看了js也有一段時間了，對於修改css樣式有很多種方式可以實現，今天做一個小小的總結吧。首先寫個例子 body部分 <div class="box">&l

vux修改css樣式的2種辦法

最近手上有個移動端的專案。前端UI框架是選擇的VUX。但是在使用的時候經常會發現框架自帶的元件樣式和我們要求的不一致。經常需要手動覆蓋樣式。這裡記錄下我們使用的2種方法。我們以XHeader元件為例。XHeader元件預設為藏青色。全域性方式找到build目錄下的webpack.base.

Javascript 如何訪問和修改CSS樣式(網頁樣式)

如果想修改某個元素的CSS樣式，建議看一下我寫的另一篇文章：注意：我說的是修改，而不是訪問。如果是修改的話可以看看上面《補充說明》這篇文章，但如果是訪問的話，就看本文中的這兩種方法，同樣，如果是訪問兼顧修改的話，也只看本文中的兩種方法（這是我瞭解到的兩種方法，如果有其

ASP.NET中直接用C# 動態修改CSS樣式

相關推薦