新手问题！动态改变元素属性！

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="动态改变字体颜色大小.aspx.cs" Inherits="动态改变字体颜色大小" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">.style1 { font: bold 16px ; color: #0000FF}
.style2 { font-size:12px; color:#00ff00}
</style>
<script>
function change(){
document.getElementById("p1").style="font: bold 16px ; color: #0000FF";//该行不可以改变
//document.getElementById("p1").className="style1"//该行可以改变
//是不是动态改变元素属性必须得把属性值写到css里才可以？
}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <p class="style2"  id="p1" onmouseover="change()" >
    鼠标在这段文字上，改变文字的大小、颜色、加粗，鼠标离开时恢复原样。
    </p>
    </div>
    </form>
</body>
</html>
请看注释，回答注释的问题？

解决方案 »

  1.   

    注释的第一个是错的
    style是只读的
    document.getElementById("p1").style="font: bold 16px ; color: #0000FF";//该行不可以改变
    ==>
    document.getElementById("p1").style["font"] ="bold 16px";//该行不可以改变
    document.getElementById("p1").style["color"] = "#0000FF";
      

  2.   

    document.getElementById("p1").style.cssText="font: bold 16px ; color: #0000FF"
      

  3.   


    楼上的正解不怕麻烦还可以用以下方式
    document.getElementById("p1").style.font="16px";
    document.getElementById("p1").style.color="#0000FF";
      

  4.   

    行内样式要用cssText   #4正解
      

  5.   

    $("#id").attr("attr_name","attr_value");
    $("#id").css("css_name","css_value");jquery封装过，比较好用，代码量少
      

  6.   

    function change(){
    document.getElementById("p1").style="font: bold 16px ; color: #0000FF";//该行不可以改变
    //document.getElementById("p1").className="style1"//该行可以改变
    //是不是动态改变元素属性必须得把属性值写到css里才可以？
    }改为：
    function change(){
    document.getElementById("p1").style.cssText="font: bold 16px ; color: #0000FF";//cssText对应style属性内部的内容
    document.getElementById("p1").className="style1"//className对应于class属性的值
    }