2011-11-18 18 views
5

Sto usando la procedura qui sotto per modificare CSS da JavaScript ma non sta dando alcun risultato.Bordo CSS in JavaScript

Qualcuno può controllare il codice e fammi sapere il metodo corretto. Ho bisogno di un bordo per il tavolo con raggio.

Questa è la mia struttura della tabella:

<table id="tt" width="400" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td width="179" class="header_links">5<input name="input" class="lang_textbox" type="text" value="Search by keyword" /></td> 
     <td width="52" align="left"><img src="images/search_go.jpg" width="28" height="24" alt="go" /></td> 
     <td width="169" class="header_links"><a href="#">FAQs</a> | <a href="#">Sitemap</a> | <a href="#">Contact us</a></td> 
     </tr> 
    </table> 

E sotto è il javascript che sto usando

document.getElementById('tt').style.borderRadius = '4em'; // w3c 
document.getElementById('tt').style.MozBorderRadius = '4em'; // mozilla 
document.getElementById('tt').style.border = '4em'; // mozilla 
+0

molto più discreto: aggiungi qualche classe CSS aggiuntiva al tuo elemento invece di modificare direttamente gli stili. – dfsq

risposta

9

Hai avuto modo di impostare la frontiera stessa (e nota border non è un Mozilla- solo la proprietà):

document.getElementById('tt').style.border = '4em solid black'; 

http://jsfiddle.net/KYEVq/

+1

E rimuovi 'border =" 0 "' dalla tabella nell'HTML poiché potrebbe sovrascrivere il CSS. – RoToRa

4

Per motivi di stile è meglio disaccoppiare il tuo stile dal tuo javascript. È consigliabile creare il tuo stile in CSS, quindi fare riferimento in javascript aggiungendo l'appropriato ad esempio classe CSS:

CSS

.className {border : '4em solid black';} 

Javascript

document.getElementById("'tt'").className += " className"; 

Oppure, se siete in grado di utilizzare un framework javascript come jQuery:

$('#tt').addClass('className'); 
$('#tt').removeClass('className'); 
$('#tt').toggleClass('className'); 
+1

Vorrei andare con questa opzione. –

0

L'impostazione della larghezza del bordo non è sufficiente per renderla visibile. Fai qualcosa come

document.getElementById('tt').style.border = "1px solid #000"; 

Anche se, questo è qualcosa che dovrebbe essere fatto sicuramente con CSS.

Inoltre, sembra che Webkit (almeno su Chromium 15) non apprezzi i bordi arrotondati sui tavoli. Meglio non usare un tavolo per quello che stai facendo comunque.