>

【必发88官网】javascript学习笔记二,js落成点击按

- 编辑:www.bifa688.com -

【必发88官网】javascript学习笔记二,js落成点击按

<script type="text/javascript">
//修改密码
//抓取到的多寡
function edit() {
document.getElementById("ps").style.display = "none";
document.getElementById("pw").style.display = "";
document.getElementById("of").style.display = "";
var butt = document.getElementById("btt");
butt.value = "修 改";
butt.onclick = function () {
save();//第一次单击的时候施行这一个函数
};
}

控制类名(className 属性)
className 属性设置或返回元素的class 属性。

语法:

object.className = classname
作用:

1.获取元素的class 属性

2. 为网页内的某个元素指定一个css样式来更改该元素的外观

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
    body{ font-size:16px;}
    .one{
        border:1px solid #eee;
        width:230px;
        height:50px;
        background:#ccc;
        color:red;
    }
    .two{
        border:1px solid #ccc;
        width:230px;
        height:50px;
        background:#9CF;
        color:blue;
    }
    </style>
</head>
<body>
    <p id="p1"class="one"> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="添加样式" onclick="add()"/>
    <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" onclick="modify()"/>

    <script type="text/javascript">
       function add(){
          var p1 = document.getElementById("p1");

       }
       function modify(){
          var p2 = document.getElementById("p2").className="two";


       }
    </script>
</body>
</html>

复制代码 代码如下:

//取消健
function off() {
var pass = document.getElementById('ps');
var pws = document.getElementById("pw");
var butt = document.getElementById("btt");
document.getElementById("of").style.display = "none",
butt.value = "编 辑";
pws.style.display = "none";
pass.innerHTML = pws.value;
pass.style.display = "";
butt.onclick = function () {
edit();//还原第3回单击的时候试行的函数
};
}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
height:400px;
width:600px;
border:#333 solid 1px;
padding:5px;}
p{
line-height:18px;
text-indent:2em;}
</style>
</head>
<body>
<h2 id="con">JavaScript课程</H2>
<div id="txt">
<h伍>JavaScript为网页加多动态效果并贯彻与用户交互的意义。</h5>
<p>1. JavaScript入门篇,让不懂JS的您,神速理解JS。</p>
<p>二. JavaScript进阶篇,让您左右JS的底子语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
<p>3. 学完以上两门基础课后,在深远学习JavaScript的变量功用域、事件、对象、运动、cookie、正则表明式、ajax等科目。</p>
</div>
<form>
<!--当点击相应开关,实践相应操作,为开关增加相应事件-->
<input type="button" value="退换颜色" onclick='modcolor()'>
<input type="button" value="更换宽高" onclick='modkg()'>
<input type="button" value="隐藏内容" onclick='modnone()'>
<input type="button" value="呈现内容" onclick='modblock()'>
<input type="button" value="打消设置" onclick='modset()'>
</form>
<script type="text/javascript">
//定义"改变颜色"的函数

<html>
<head>
<script type="text/javascript">
function showDiv(id){

//编辑之后的场所
function save() {
var pass = document.getElementById('ps');
var pws = document.getElementById("pw");
var butt = document.getElementById("btt");
butt.setAttribute("type","submit");
butt.value = "编 辑";
pws.style.display = "none";
pass.innerHTML = pws.value;
pass.style.display = "";
butt.onclick = function () {
edit();//还原第二遍单击的时候实行的函数
};
}
</script>
</p>
<form action="oneself.php" method="post">
<p style="font: 16px '宋体';">姓名: <input type="text" name="name" value="张三" /></p>
<p style="font: 16px '宋体';">账号: <input type="text" name="handset" value="13888888888" /></p>
<p style="font: 16px '宋体';">密码: <span id="pass" style="border: 1px solid gray; width: 200px;">888888</span> <textarea id="ei" style="display: none;" name="newpass">888888</textarea> <input id="btt" onclick="edit();" type="button" name="btt" value="编 辑" /> <input id="of" style="display: none;" onclick="off();" type="button" name="of" value="取 消" /></p>
</form>

function modcolor(){
var p1=document.getElementById('txt').style.color='red';
}

document.getElementById("selectOption").style.display="block";
document.getElementById("selectOption").style.position="absolute";
document.getElementById("selectOption").style.top=document.getElementById(id).offsetTop 25;
document.getElementById("selectOption").style.left=document.getElementById(id).offsetLeft 20;
}
function selectM()
{
var obj = document.getElementById("mySelect");
alert(obj.selectedIndex);

//定义"改动宽高"的函数
function modkg(){
var p1=document.getElementById('txt').style.width="20";
var p2=document.getElementById('txt').style.height="30";
}

}
function checkselect(objname){
o = document.getElementById(objname);
t = document.getElementById("output");
var intvalue="";
for(i=0;i<o.length;i ){
if(o.options[i].selected){
intvalue =o.options[i].value ",";
}
}
t.value=intvalue.substr(0,intvalue.length-1);
alert(intvalue);

//定义"隐藏内容"的函数
function modnone(){
var p1=document.getElementById('txt').style.display='none';
}

}

//定义"显示内容"的函数
function modblock(){
var p1=document.getElementById('txt').style.display='block';
}

必发88官网,</script>
</head>
<body>

//定义"撤除设置"的函数
function modset(){
var p1=confirm('是不是要求开首化');
if(p1==true){
document.getElementById('txt').removeAttribute("style")
}

<form>
<div id="selectOption" style='width:100px;height:50px;z-index:100;border:1px solid #0099FF;background:#cccccc;display:none;'>
<select id="mySelect" multiple="multiple" size="4">
<option value='苹果'>苹果</option>
<option value='桃子'>桃子</option>
<option value='香蕉'>香蕉</option>
<option value='桔子'>桔子</option>
</select>
<input type="button" onclick="checkselect('mySelect')" value="checkselect">
</div>
入选的门类:<input type="text" name="output">
<input id="lalla" type="button" onclick="showDiv(this.id)" value="选择">
<br/>
</form>
<p>在你点击 “采取八个” 按键以前,请尝试同时选拔四个选择。在点击 “采纳八个” 开关之后,请再试1遍。</p>
</form>
</body>
</html>

}

代码如下: html head script type="text/javascript" function showDiv(id){ document.getElementById("selectOption").style.display="block"; document.getElementById("sel...

 

</script>
</body>
</html>

 

 

本文由必发88官网发布,转载请注明来源:【必发88官网】javascript学习笔记二,js落成点击按