2014-01-26 33 views
0

所以我只希望在响应中出现两次的名字显示为斜体。我是一个真正的noob,所以请帮助我并明确。我很感激 http://dave-reed.com/book3e/Ch5/greet.html 以下是示例网站。我只希望你的名字在回应中被斜体化。如何在输入框中输入刚才输入的名称以斜体显示。请看这段代码

<!DOCTYPE html> 
<!-- saved from url=(0042)http://dave-reed.com/book3e/Ch5/greet.html --> 
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <title> Greetings </title> 
</head> 

<body> 
    <h2>Greetings</h2> 
    <p> 
    Enter your name: <input type="text" id="nameBox" size="12" value=""> 
    </p> 
    <input type="button" value="Click for Greeting" onclick="document.getElementById('outputDiv').innerHTML= 
        'Hello ' + document.getElementById('nameBox').value + 
        ', welcome to my page.<br>Do you mind if I call you ' + 
        document.getElementById('nameBox').value + '?';"> 
    <hr> 
    <div id="outputDiv"></div> 

</body></html> 
+0

Welome堆叠流。你的问题得到了低估,因为它不符合http://stackoverflow.com/help/on-topic上的标准。从您的问题中遗漏的一件事是对您尝试实现结果的任何解释。一个简单的'HTML italic'谷歌会让你开始。 – GreenAsJade

回答

0
<!DOCTYPE html> 
<!-- saved from url=(0042)http://dave-reed.com/book3e/Ch5/greet.html --> 
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <title> Greetings </title> 
<style type="text/css"> 
.italic { 
    font-style:italic; 
} 
</style> 
</head> 

<body> 
<h2>Greetings</h2> 
    <p> 
    Enter your name: <input type="text" id="nameBox" size="12" value=""> 
    </p> 
    <input type="button" value="Click for Greeting" onclick="document.getElementById('outputDiv').innerHTML= 
        'Hello <span class=\'italic\'>' + document.getElementById('nameBox').value + 
        '</span>, welcome to my page.<br>Do you mind if I call you <span class=\'italic\'>' + 
        document.getElementById('nameBox').value + '</span>?';"> 
    <hr> 
    <div id="outputDiv"></div> 
</body></html> 
0

创建一个新的CSS规则:

.test{ 
    font-style: italic; 
} 

然后加入<span class=\'test\'> </span>各地名的每个实例,像这样...

<body> 
    <h2>Greetings</h2> 
    <p> 
    Enter your name: <input type="text" id="nameBox" size="12" value=""> 
    </p> 
    <input type="button" value="Click for Greeting" onclick="document.getElementById('outputDiv').innerHTML= 
        'Hello <span class=\'test\'>' + document.getElementById('nameBox').value + 
        '</span>, welcome to my page.<br>Do you mind if I call you <span class=\'test\'>' + 
        document.getElementById('nameBox').value + '</span>?';"> 
    <hr> 
    <div id="outputDiv"></div> 

</body> 

查看小提琴here

+0

该类不需要命名为'test' - 只要确保在'span'标签中更改类名称,就可以将其称为任何您想要的内容(遵循CSS命名准则)。 – Birrel