This time we have to use other object property pairs to implement dynamic change text, which is: InnerText, Outertext, InnerHtml, OuteHtml, should pay attention to their case, because you have to have an expected effect. This is a new way. When you master it, you will be able to design dynamic content as you want, you can't miss it! Example 12 Dynamic Change Text and HTML
DHTML Example 12 </ title> <style> <! - body {font-family: "Song"; color = "blue"; font-size = "9pt"} -> </ style> <script language = "javascript"> Function ChangeText () {dt.innerText = "I am fine!";} // function function changehtml () {DH.INNERHTML = "< I> <u> My surname! </ u> </ i> ";} // function function back () {dt.innertext =" Hello? "; DH.INNERHTML =" What is your last name? " } </ script> </ head> <body> <p> <font color = "gray"> Please click on the text below ... </ font> <ul> <li id = "dt" οnclick = "ChangeText () "> Hello? </ Li> <li id =" DH "οnclick =" Changehtml ()> What? </ Li> <li οnclick = "back ()"> Restore! </ Li> </ ul> </ body> </ html> InnerText property is used to define the text you want to output in this example, in this example, "Hello, how do you?" becomes "I am very good!" ( The statement dt.innertext = "I am fine!"). The change of the object DH uses the InnerHTML attribute. In addition to the role of InnerText, it can also change the HTML statement inside the object DH, so it turns the text into "My surname Xiao!", And the text output is changed to itrally (<I> </ i>) and add a straight line (<u> </ u>), ie statement DH.INNERHTML = "<i> <u> My surname Xiao! </ U> </ i>" . Outertext and OuterHTML also have similar roles, readers may wish to try themselves. Let's take an interesting dynamic page.</p>
<p>Example 13 Dynamic Input and Output <HTML> <HEAD> <Title> DHTML Example 13 </ Title> <style> <! - body {font-family: "Song"; color = "blue"; font-size : "9pt"} .boe {color: blue; font-size: 9pt} -> </ style> <script language = "javascript"> function outputText () {if (frm.txt.text! = ") {Output.innerHTML = "Output text here: <u>" frm.txt.value "</ u>";} // Output is an object. Else {Output.innertext = "Output text here:";}} // function </ script> </ head> <body> <p> <br> </ p> <form name = "frM"> <Form Name = "fm"> < P> <font color = "gray"> Enter text in the text box: </ font> <input type = "text" name = "txt" size = "50"> <br> <input type = "button" Value = "Output text" name = "b1" class = "blue" οnclick = "OUTPUTTEXT ()> </ p> </ form> <p id =" output "> Output text here: </ p> </ body> </ html> The dynamic effect of this case is as follows, first enter the text in the text box, then press the "Output Text" button, then the web page will automatically output the text you entered. In addition, we can also use the INSERTADJACENTHTML and INSERTADJACENTTEXT methods (method is a function that is directly called by a particular object) in front of the previous text or HTML content, and uses these methods to use these methods require parameters, these parameters have : BeforeBegin, Afterbegin, Beforeend and Afterend, they are used to indicate text or html insertion.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-45385.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="45385" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.046</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'qJmo9kytkZFUMF5gqxbUivEzspj4x7C1G1psI79U_2FnunHIfDXqADmEGYA_2BAcB7OxgoyuZWQQVGKIPrM45y4iRw_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
