修改_css定义_中的属性

ZC: 这里修改的是 css定义(例如?.css文件中的定义) 中的属性，并不是修改某个对象的css属性。

1、

// <<JavaScript高级程序设计>> 第12章 DOM2和DOM3 ==> 12.2 样式 --> 12.2.2 操作样式表
/*
HTMLLinkElement        可读写
HTMLStyleElement    可读写
CCCStyleSheet        只读接口(有一个属性例外)    可代表上面两个，更为通用
*/

 

2、

// 测试代码
function CssStyle_Test02()
{
    CssStyle_Set("zctest.css", ".divVideoState_02", "height", "800px");
    console.log(CssStyle_Get("zctest.css", ".divVideoState_02", "height"));
    
    console.log(CssStyle_Get(null, ".movieDetailMsg", "height"));
}

// _strCssFilename 传入null时 ==> 操作本文件中的css定义
// _strCssFilename 传入css文件名称时 ==> 操作外部文件中的css定义
function CssStyle_Get(_strCssFilename, _strSelectorText, _strPropName)
{
    console.log("");
    console.log("document.styleSheets.length : "+document.styleSheets.length);
    for (var i=0; i<document.styleSheets.length; i++)
    {
        console.log("==> "+i);
        var sheet = document.styleSheets[i]; // CCCStyleSheet类型
        //console.log("sheet.href : "+sheet.href);
        
        var b = false;
        if (_strCssFilename == null)
        {
            if (sheet.href == null)
                b = true;
        }
        else
        {
            if (sheet.href != null)
            {
                var strRtnFilename = Href_Filename(sheet.href).toLowerCase();
                //console.log("strRtnFilename : "+strRtnFilename);
                if (strRtnFilename == _strCssFilename.toLowerCase())
                    b = true;
            }
        }
        
        if (b)
        {
            // ZC: 属性cssRules/rules的获取，只有在http服务器上的时候才可以获取，浏览器直接打开网页文件的话 是无法访问 这两个属性的 ! !
            var rules = sheet.cssRules || sheet.rules;
            if (rules.length > 0)
            {
                for (var j=0; j<rules.length; j++)
                {
                    var rule = rules[j];
                    if (rule.selectorText.toLowerCase() == _strSelectorText.toLowerCase())
                    {
                        //console.log("rule : "+rule+" , rule.style : "+rule.style);
                        //console.log(rule.style.getPropertyValue(_strPropName));
                        return rule.style.getPropertyValue(_strPropName);
                    }
                }
            }
        } // if (b)
    } // for
    return null;
} // CssStyle_Get(...)

//*
function Href_Filename(_strCssHref)
{
    // 返回的是文件名(如传入的是"http://localhost:8080/Html5_Video_Simplest/Play.css"，那么返回的就是"Play.css")
    var iInLen = _strCssHref.length;
    if (iInLen <= 0)
        return null;

    for (var i=(iInLen - 1); i>=0; i--)
    {
        if (_strCssHref.charAt(i) == '/')
        {
            if (i == (iInLen - 1))
                return null;
            return _strCssHref.slice(i+1, iInLen);
        }
    }

    return null;
}
//*/

// _strCssFilename 传入null时 ==> 操作本文件中的css定义
// _strCssFilename 传入css文件名称时 ==> 操作外部文件中的css定义
function CssStyle_Set(_strCssFilename, _strSelectorText, _strPropName, _strPropValue)
{
    //console.log("");
    //console.log("document.styleSheets.length : "+document.styleSheets.length);
    for (var i=0; i<document.styleSheets.length; i++)
    {
        var sheet = document.styleSheets[i]; // CCCStyleSheet类型
        //console.log("sheet.href : "+sheet.href);
        
        var b = false;
        if (_strCssFilename == null)
        {
            if (sheet.href == null)
                b = true;
        }
        else
        {
            if (sheet.href != null)
            {
                var strRtnFilename = Href_Filename(sheet.href).toLowerCase();
                //console.log("strRtnFilename : "+strRtnFilename);
                if (strRtnFilename == _strCssFilename.toLowerCase())
                    b = true;
            }
        }
        
        if (b)
        {
            var rules = sheet.cssRules || cssRules.rules;
            if (rules.length > 0)
            {
                for (var j=0; j<rules.length; j++)
                {
                    var rule = rules[j];
                    if (rule.selectorText.toLowerCase() == _strSelectorText.toLowerCase())
                    {
                        //console.log("rule : "+rule+" , rule.style : "+rule.style);
                        //console.log(rule.style.getPropertyValue(_strPropName));
                        rule.style.setProperty(_strPropName, _strPropValue);
                    }
                }
            }
        } // if (b)
    } // for
    return null;
} // CssStyle_Set(...)

 

3、

4、

5、