JQuery
直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript">
$(function() {
alert('hello...');
$('#but_show').click(function(){
var putVal=document.getElementById('text_01').value;
var $putVal=$('#text_01').val();
$('#span_show').text(putVal+'<----->'+$putVal);
$('#text_02').val(putVal+'<----->'+$putVal);
})
$('#but_ok').click(function(){
$('.css1').css({'border':'1px solid red','background-color':'blue',
'width':'800px','height':'150px'});
$('.css2').attr('style','border:1px solid red;background-color:gray;width:800px;height:100px;');
$('#css3').css('border','1px solid red').css('bacckground-color','pink').css('width','800px').css('height','150px').css('margin-top','50px');
$('#text_02').css({'display':'block'})
})
});
</script>
</head>
<body>
<form action="" method="post">
<input type="text" name="userName" value="小白" id="text_01"/>
<div class="css1">
外部div
<div class="css2">
内部div
</div>
</div>
<div id="css3" >
外部同级div
<span id="span_show">
</span>
<input type="" name="text_02" id="text_02" value="" style="display:none" />
</div>
<input type="button" value="ok" id="but_ok"/>
<input type="button" value="show" id="but_show"/>
</form>
</body>
</html>