                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript入门篇

怎么让我的p2自动在one和two这两个样式之间自动跳转呢，有不有大神可以帮个忙，谢谢

<!DOCTYPE HTML>

<html>

<head>

<title>className属性</title>

<style>

body{ font-size:16px;}

.one{

border:10px solid #cab;

width:230px;

height:50px;

background:#ccc;

color:red;

}

.two{

border:10px solid #ccc;

width:230px;

height:50px;

background:#9CF;

color:blue;

}

</style>

</head>

<body>

<p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>

<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>

function add(){

var p1 = document.getElementById("p1");

p1.className="one";

}

var p2 = document.getElementById("p2");

p2.className="two";

document.write("现在的样式ID是："+p2.className);

function modify(){

if(p2.className=="one")

{

p2.className="two"

}

else

{

p2.className="one"

}

</script>

</body>

</html>

qq_夜静了_0

2018-08-03

源自：JavaScript入门篇 3-6

关注问题我要回答

1416

操作

收起

3 回答

AKhui 回答被采纳 +2 积分
2018-08-13

自动切换的话需要使用到定时器。setInterval(),js定时器相关知识可以网上搜索一下，good luck

<!DOCTYPE HTML>

<html>

<head>

<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" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>

<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>

function add(){

var p1 = document.getElementById("p1");

p1.className='one';

}

function modify(){

var p2 = document.getElementById("p2");

p2.className=p2.className==='two'?'one':'two';

}

var init;

function start(){

init = self.setInterval('modify()',1000);

}

function stop(){

init = self.clearInterval(init);

}

</script>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

qq_夜静了_0 提问者

非常感谢！

2018-08-15 回复有任何疑惑可以回复我~

mihachen

我想问一下这个 p2.className=p2.className==='two'?'one':'two'; 这个是什么意思？

2018-09-07 回复有任何疑惑可以回复我~

面包与理想回复 mihachen

3元运算符 p2.className 等于“two” ,执行把“one”赋值给p2.className,反之把“two”赋值给p2.className

2018-09-12 回复有任何疑惑可以回复我~

查看1条回复

mihachen
2018-09-07

我想问一下这个

p2.className=p2.className==='two'?'one':'two';

这个是什么意思？

0 回复有任何疑惑可以回复我~

收起回答

akakidz
2018-08-03

<!DOCTYPE HTML>

<html>

<head>

<title>className属性</title>

<style>

body{ font-size:16px;}

.one{

border:10px solid #cab;

width:230px;

height:50px;

background:#ccc;

color:red;

}

.two{

border:10px solid #ccc;

width:230px;

height:50px;

background:#9CF;

color:blue;

}

</style>

</head>

<body>

<p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>

<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>

<input id="sh1" type="button" value="one" onclick="modify()"/>

function add(){

var p1 = document.getElementById("p1");

p1.className="one";

}

var p2 = document.getElementById("p2");

var button = document.getElementById("button");

// p2.className="two";

// document.write("现在的样式ID是："+p2.className);

function modify(){

if(p2.className=="one")

{

p2.className="two";

document.getElementById("sh1").value="two";

}

else

{

p2.className="one";

document.getElementById("sh1").value="one";

}

</script>

</body>

</html>

楼主写的已经可以更换样式了，我调整了一下button的问题

0 回复有任何疑惑可以回复我~

收起回答

qq_夜静了_0 提问者

你这个是自动的吗？为什么我这儿用了还是要不停的手动去点按钮它才能替换呢

2018-08-04 回复有任何疑惑可以回复我~

0/150

提交

取消

JavaScript入门篇

参与学习 739727 人
解答问题 9566 个

JavaScript做为一名Web工程师的必备技术，本教程让您快速入门

进入课程

本课相似问答

2 回答连续点击”添加样式“能让其样式在 .one和.two之间变换。

3 回答可以通过类名将one和two两个类名都p2元素吗

2 回答js大神可以帮我看看有什么问题么。谢谢。

2 回答className修改了p1,p2标签为one、two，为什么不是#one、#two？

1 回答求大神帮忙指出错在哪？谢谢~

搜索更多本课相关问答

怎么让我的p2自动在one和two这两个样式之间自动跳转呢，有不有大神可以帮个忙，谢谢

我要回答关注问题

热搜

最近搜索清空

怎么让我的p2自动在one和two这两个样式之间自动跳转呢，有不有大神可以帮个忙，谢谢

3 回答

本课相似问答

怎么让我的p2自动在one和two这两个样式之间自动跳转呢，有不有大神可以帮个忙，谢谢