透过 CSS 模式设定建立弹性的网页界面

标签：https   ide   利用   sts   var   www   float   name   特性   

在我的新书里面，有这样一个范例，是为了说明 HTML 的一些元素通用属性，包含 style 、 class 以及 id 等等，透过勾选 checkbox 以及点选 radio 选项，可以改变这两组 li 的配置。

    

        
HTML
        
CSS
        
JavaScript
        
INPUT
    

        
Java
        
ASP.NET
        
PHP
        
CSS3
    

以下是所需的 CSS ：

以下是用到的 JavaScript ：

 function changeHandler(o) {	
     var technology_list_1 = document.getElementById(‘h_technology_1‘);            
     var technology_list_2 = document.getElementById(‘h_technology_2‘);
            if (o.id == ‘ltype‘) {
                if (o.checked == true) {
                    technology_list_1.style.listStyleType = ‘none‘;
                    technology_list_2.style.listStyleType = ‘none‘;
                } else {
                    technology_list_1.style.listStyleType = ‘disc‘;
                    technology_list_2.style.listStyleType = ‘disc‘;
                }
            } else if (o.id == ‘hor‘) {
                var lis = document.getElementsByTagName(‘li‘);
                if (o.checked == true) {
                    for (var key in lis)
                        lis[key].setAttribute(‘class‘, ‘titem_h‘);
                } else {
                    for (var key in lis)
                        lis[key].setAttribute(‘class‘, ‘titem_v‘);
                }
            } else if (o.id == ‘ver‘) {
                var lis = document.getElementsByTagName(‘li‘);
                if (o.checked == true) {
                    for (var key in lis)
                        lis[key].setAttribute(‘class‘, ‘titem_v‘);
                } else {
                    for (var key in lis)
                        lis[key].setAttribute(‘class‘, ‘titem_h‘);
                }
            }
 }    

原文:大专栏  透过 CSS 模式设定建立弹性的网页界面

透过 CSS 模式设定建立弹性的网页界面

标签：https   ide   利用   sts   var   www   float   name   特性   

原文地址：https://www.cnblogs.com/petewell/p/11445407.html