2011-11-18 88 views
5

Tôi đang sử dụng quy trình dưới đây để sửa đổi CSS từ JavaScript nhưng không đưa ra bất kỳ kết quả nào.Đường viền CSS trong JavaScript

Ai cũng có thể kiểm tra mã và cho tôi biết phương pháp thích hợp. Tôi cần biên giới cho bảng với bán kính.

Đây là cấu trúc bảng của tôi:

<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> 

Và dưới đây là javascript mà đang sử dụng

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

Cách kín đáo hơn: thêm một số lớp CSS bổ sung vào phần tử của bạn thay vì trực tiếp sửa đổi kiểu. – dfsq

Trả lời

9

Bạn đã có để thiết lập biên giới riêng của mình (và lưu ý border không phải là một Mozilla- chỉ tài sản):

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

http://jsfiddle.net/KYEVq/

+1

Và xóa 'border =" 0 "' khỏi bảng trong HTML vì nó có thể ghi đè lên CSS. – RoToRa

4

Như một vấn đề về phong cách, tốt hơn là nên bỏ kiểu dáng của bạn khỏi javascript của bạn. Bạn nên xem xét việc tạo phong cách của bạn trong css, sau đó tham khảo nó trong javascript bằng cách thêm các lớp css phù hợp ví dụ:

CSS

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

Javascript

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

Hoặc nếu bạn là có thể sử dụng một khung javascript như jQuery:

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

Tôi sẽ đi với tùy chọn này. –

0

Đặt chiều rộng đường viền không đủ để làm cho nó hiển thị. Làm điều gì đó như

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

Mặc dù, đây là điều chắc chắn nên được thực hiện với CSS.

Ngoài ra, có vẻ như Webkit (ít nhất là trên Chromium 15) không giống như đường viền tròn trên bảng. Tốt hơn là không sử dụng bảng cho những gì bạn đang làm.

Các vấn đề liên quan