親自試一試HTML和CSS程序

我正在嘗試一下HTML和CSS程序，就像你會在w3schools或其他網站上看到的一樣。我想知道是否有一種方法可以製作另一個只顯示HTML並忽略CSS的按鈕，而不必同時擁有用戶類型。這裏是我的代碼，所以我仍然想製作一個切換按鈕來切換和關閉CSS，但我不知道如何執行此操作。親自試一試HTML和CSS程序

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <style> textarea { 
      height: 100px; 
      width: 1000px; 
    } </style> 
</head> 
<body> 
    <form id='assignment5' method="post" action="assignment5.html"> 
    <table> 
     <tr><td><textarea name="html">Enter HTML Here</textarea></td></tr> 
     <tr><td><textarea name="css">Enter CSS Here</textarea></td></tr> 
    </table> 
    <input type="submit" value="Launch"> 
    <input type="reset"> 
    </form> 
    <div id='content'></div> 
</body> 
</html> 

<script> 
$(document).ready(function(){ 
$('#assignment5').submit(function(e){ 
    e.preventDefault(); 
    $('#content').html($(':input[name=html]').val()); 
    $('head').append('<style>' + $(':input[name=css]').val() + '</style>'); 
}); 
}); 
</script>

來源

2014-10-03 ryan jimmy

是的，這是可能的..

首先，你只需要創建聽於該目的的元素..

像（使用一個單獨的按鈕）：

<input type="button" value="Html only" id="html_only">

那麼這jQuery腳本來處理單擊事件：

// this will just output the html ignoring the css textarea 
$('#html_only').click(function(e){ 
    $('#content').html($(':input[name=html]').val()); 
});

或這種方式（使用就像一個開關複選框）：

<input type="checkbox" name="css_switch" id="css_switch"/> apply CSS?

，改變你的腳本是：

$('#assignment5').submit(function(e){ 
    e.preventDefault(); 
    if($("#css_switch").is(":checked")){ 
     // output from html textarea only 
     $('#content').html($(':input[name=html]').val()); 
    } 
    else{    
     // output from html textarea and append input from css textarea 
     $('#content').html($(':input[name=html]').val()); 
     $('head').append('<style>' + $(':input[name=css]').val() + '</style>'); 
    } 
});

USING button DEMO

USING checkbox DEMO

來源

2014-10-03 02:03:18 reuelab

親自試一試HTML和CSS程序

回答

相關問題