ASP.net을 사용하여 HTML 텍스트 영역의 글꼴 이름과 크기 변경

빈 div 요소가 있고 HTMLtext 영역을 가지고 있고 이제는 두 개의 드롭 다운 목록이 있습니다. 하나는 글꼴 이름이고 다른 하나는 글꼴입니다. 크기.ASP.net을 사용하여 HTML 텍스트 영역의 글꼴 이름과 크기 변경

지금 내가 텍스트 영역에 글을 쓰는 경우 드롭 다운 목록에서 글꼴 이름을 선택하면 텍스트가 텍스트 영역에 즉시 반영되어야합니다. 어떻게해야합니까?

여기 내 코드입니다 :

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
    For Each f As System.Drawing.FontFamily In System.Drawing.FontFamily.Families 
     DropFont.Items.Add(f.Name) 
    Next 
End Sub

이 내 디자인 코드입니다 : 당신은 당신이 원하는 것을 달성하기 위해 클라이언트 측 스크립트를 사용하도록해야 할 것

<div class="exampe"> 
<textarea name="TextBox1" rows="2" id="TextBox1" cols="20"></textarea> 
</div> 


    <asp:DropDownList ID="DropFontSize" runat="server"> 
            <asp:ListItem Value="6">6</asp:ListItem> 
            <asp:ListItem Value="8">8</asp:ListItem> 
            <asp:ListItem Value="10">10</asp:ListItem> 
            <asp:ListItem Value="12">12</asp:ListItem> 
            <asp:ListItem Value="14">14</asp:ListItem> 
            <asp:ListItem Value="18">18</asp:ListItem> 
            <asp:ListItem Value="24">24</asp:ListItem> 
            <asp:ListItem Value="32">32</asp:ListItem> 
            <asp:ListItem Value="36">36</asp:ListItem> 
            <asp:ListItem Value="40">40</asp:ListItem> 
            <asp:ListItem Value="48">48</asp:ListItem> 
            <asp:ListItem Value="52">52</asp:ListItem> 
            <asp:ListItem Value="56">56</asp:ListItem> 
            <asp:ListItem Value="62">62</asp:ListItem> 
            <asp:ListItem Value="68">68</asp:ListItem> 
            <asp:ListItem Value="72">72</asp:ListItem> 
           </asp:DropDownList>

출처

2011-10-27 coder

. 이상적으로 jQuery를 사용하여 드롭 다운 목록의 변경 이벤트에 연결하고 selecetion을 기반으로 텍스트 영역에 CSS 클래스를 적용하거나 텍스트 영역의 CSS 속성을 사용하여 글꼴 집합을 변경하는 것이 좋습니다. 모든 생성 방지하기 위해, 또는

$('#fonts').change(function() { 
    var fontfamily = $('#fonts').val(); 
    $('#TextBox1').removeClass(); 
    $('#TextBox1').addClass(fontfamily); 
});

: 스타일을 변경할 수

<select id="fonts"> 
    <option value="arial">Arial</option> 
    <option value="verdana">Verdana</option> 
</select> 

<textarea name="TextBox1" rows="2" id="TextBox1" cols="20"></textarea>

사용이 jQuery를 : 다음 HTML에 대한

<style> 
    .arial { 
     font-family: arial; 
    } 

    .verdana { 
     font-family: verdana; 
    } 
</style>

: 헤더 또는 스타일 시트 세트에서

글꼴 클래스는 CSS 속성을 사용하십시오 :

$('.target').change(function() { 
    var fontfamily = $('.target').val(); 
    $('#TextBox1').css('font-family', fontfamily); 
});

동적으로 생성 된 asp.net ID가 드롭 다운 목록 ID로 표시 될 수 있습니다. 당신은 그것을 확인하거나 자바 스크립트 내에서의 클라이언트 ID의 때에 프로퍼티를 얻기 위해 인라인 스크립트를 사용하는 대신 클래스를 사용할 수 있습니다

var ddlId = <%=DropFontSize.ClientID %>; 
var fontfamily = $('#' + ddlId).val();

출처

2011-10-27 08:20:33

당신은 나에게 샘플을 제공 할 수 시작하기. – coder

당신은 dropdownlist에 AutoPostBackAutoPostBack 당신의 textbox에뿐만 아니라 추가해야합니다. dropdown의 SelectedIndexChanged Event를 사용하여 당신이 text box에서 텍스트와 dropdown list

희망의 값과 일치 수있는이 내가 이런 식으로 일을 달성 한

출처

2011-10-27 08:20:49

을하는 데 도움이

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#DropFont").change(
    function() { 
     var fontname = $("#DropFont").val(); 
     $("#TextBox1").css("font-family", fontname); 
    } 
), 

$("#DropFontSize").change(
    function() { 
     var fontsize = $("#DropFontSize").val(); 
     $("#TextBox1").css("font-size", fontsize); 
} 
) 
}) 
    </script>

출처

2011-10-27 08:32:40 coder

ASP.net을 사용하여 HTML 텍스트 영역의 글꼴 이름과 크기 변경

답변

관련 문제