-
输出内容：
document.write();
查看全部 -
这里先定义了一个对象mychar来存储con对应的标签，然后对这个对象进行style操作修改样式，就能修改对应的标签的属性
查看全部 -
backgroundColor:C大写
查看全部 -
定义变量var 来存储id=con的标签和文字
mychar=document.getElementById("con");
直接调用mychar输出的是它的元素属性/标签
调用mychar.innerHTML输出的是它的文字内容
查看全部 -
这里 menubar toolbar scrollbars status 都是些啥？
查看全部 -
定义变量的关键字 var 例： var 变量名
查看全部 -
编程挑战
请编写"改变颜色"、"改变宽高"、"隐藏内容"、"显示内容"、"取消设置"的函数，点击相应按钮执行相应操作，点击"取消设置"按钮后，提示是否取消设置，如是执行操作，否则不做操作。
查看全部 -
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
function openWindow(){
var mymassage=confirm("确定要打开弹窗吗？")
if(mymassage==true){
window.open('http://www.imooc.com','_black','width=400,height=500,menubar=no,toolbar=no') ;
}
else{
}
}
// 新窗口打开时弹出确认框，是否打开
// 通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/
//打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。
</script>
</head>
<body>
<input type="button" value="新窗口打开网站" onclick="openWindow()" />
</body>
</html>
查看全部 -
object.className = classname
查看全部 -
var winopen=confirm("确定要打开弹窗吗？")http：//www.imooc.com/。
if(winopen==true){
window.open('http://www.imooc.com','_black','width=400,height=500,menubar=no,toolbar=no') ;
}
else{
}
查看全部 -
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
function openwindow(){
// 新窗口打开时弹出确认框，是否打开
var mymessage=confirm("你喜欢JavaScript吗?");
if(mymessage==true)
{
var myname;
// 通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/
myname = prompt("确认打开网址？","http://www.imooc.com")
if(myname!=null){
//打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。
window.open('http://www.imooc.com','_blank','width=400,height=500,menubar=no,toolbar=no')
}else{
alert("Bye!")
}
}else{
alert("Bye!")
}
}
</script>
</head>
<body>
<input type="button" value="新窗口打开网站" onclick="openWindow()" />
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
function openWindow()
{var open=confirm("确认新建窗口打开网站吗？");
if(open==true)
//新窗口打开时弹出确认框，是否打开
{var url=prompt("通过输入对话框，确定打开的网址","http://www.imooc.com");
if(url!=null)
//通过输入对话框，确定打开的网址,默认为http://www.imooc.com
{window.open(url,"_blank",'width=400px,height=500px,menubar=no,toolbar=no');
}
//打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。
else
{alert("再见！");}
}
else
{alert("再见！");}
}
</script>
</head>
<body>
<input type="button" value="新窗口打开网站" onclick="openWindow()" />
</body>
</html>
查看全部 -
.removeClass('现在的样式').addClass('原始的样式')
查看全部 -
//这样写可以指定修改宽高的数值
<!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">
<h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
<p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
<p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
<p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
</div>
<form>
<!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
<input type="button" value="改变颜色" onclick="changeColor()">
<input type="button" value="改变宽高" onclick="changeHeightAndWidth()">
<input type="button" value="隐藏内容" onclick="displayOfNone()">
<input type="button" value="显示内容" onclick="displayOfBlock()">
<input type="button" value="取消设置" onclick="cancelAll()">
</form>
<script type="text/javascript">
//定义"改变颜色"的函数
function changeColor(){
var mycon=document.getElementById("con");
var mytxt=document.getElementById("txt");
colorOfCon=prompt("请输入改变后标题的颜色：");
colorOfTxt=prompt("请输入改变后正文的颜色：");
mycon.style.color=colorOfCon;
mytxt.style.color=colorOfTxt;
}
//定义"改变宽高"的函数
function changeHeightAndWidth(){
var mycon=document.getElementById("con");
var mytxt=document.getElementById("txt");
heightOfCon=prompt("请输入改变后标题的高度(单位：px)：");
widthOfCon=prompt("请输入改变后标题的宽度(单位：px)：");
heightOfTxt=prompt("请输入改变后正文的高度(单位：px)：");
widthOfTxt=prompt("请输入改变后正文的宽度(单位：px)：");
mycon.style.height=heightOfCon+"px";
mycon.style.width=widthOfCon+"px";
mytxt.style.height=heightOfTxt+"px";
mytxt.style.width=widthOfTxt+"px";
}
//定义"隐藏内容"的函数
function displayOfNone(){
var mycon=document.getElementById("con");
var mytxt=document.getElementById("txt");
mycon.style.display="none";
mytxt.style.display="none";
}
//定义"显示内容"的函数
function displayOfBlock(){
var mycon=document.getElementById("con");
var mytxt=document.getElementById("txt");
mycon.style.display="block";
mytxt.style.display="block";
}
//定义"取消设置"的函数
function cancelAll(){
var mycon=document.getElementById("con");
var mytxt=document.getElementById("txt");
var cancel=confirm("确定要取消以上所有的操作吗？");
if(cancel==true){
mycon.removeAttribute("style");
mytxt.removeAttribute("style");
}
else{
}
}
</script>
</body>
</html>
查看全部 -
语法：
object.className = classname
作用:
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观
查看全部
举报