Question

我有一个员工扩展名单表，旁边有员工姓名和员工缩略图。我需要为用户提供小型中型大型单选按钮（或下拉）选项，并相应地显示员工图像。我想知道是否可以使用CSS完成此操作？或者我可以根据单选按钮选择在java脚本中创建CSS类吗？我试图通过java脚本来做，但它只适用于我的第一行。其余的行没有变化。这是我的代码的一瞥。

<Script type="text/javascript">
    function changeClass(){

alert(document.getElementById("lastName").getAttribute("style"));

var imgSize = document.getElementById("lastName").getAttribute("style");


if(document.getElementById('ImgSizeSmall').checked == true) {
    document.getElementById('lastName').setAttribute("style", "width:75px;" );
} else if(document.getElementById('ImgSizeMedium').checked == true) {
    document.getElementById('lastName').setAttribute("style", "width:100px;" );
}  else if(document.getElementById('ImgSizeLarge').checked == true) {
    document.getElementById('lastName').setAttribute("style", "width:150px;" );
}
</Script>

<Div style="width:385px;height: 950px; float:left; background-color:#A5B3D8;">
    <p align="left">

    <p align="left"><b>Image Size:</b><br>
        <input id="ImgSizeSmall" type="radio" name="ImgSize" value="small" checked="checked" onclick="changeClass()">  <b><i>Small</i></b>
        <input id="ImgSizeMedium" type="radio" name="ImgSize" value="medium"> <b><i>Medium</i></b>
        <input id="ImgSizeLarge" type="radio" name="ImgSize" value="large"> <b><i>Large</i></b>
    </p>

</DIV> 

<table id="table_firstname_lastname">
        <thead>
            <tr>
                <th style="width: 208px;">First Name</th>
                <th style="width: 208px;">Last Name</th>
                <th style="width: 208px;">Phone Number</th>
                <th style="width: 275px;">Location</th>
                <th style="width: 208px;">Cell</th>
                <th style="width: 275px;">Team(s)</th>
            </tr>
        </thead>
        <tbody>             
            <tr>

                <td>first name</td>
                <td>last name 
                     <img  id="lastName" style="width: 75px;"  src="http://imagesource/image.jpg"  align="right"></a></td>

                <td>9999999999</td>
                <td>location 1</td>
                <td>8888888888</td>
                <td>team name</td>
            </tr>

        </tbody>
    </table>

谢谢，中号

Answer 1

我记得来自CSS Tricks的一篇文章导致了Fiddeling：Fiddle

HTML：

<div> 
<input type="radio" id="tab-1" name="tab-group-1" checked>
<input type="radio" id="tab-2" name="tab-group-1">
<input type="radio" id="tab-3" name="tab-group-1">
<img src="http://www.mycatspace.com/wp-content/uploads/2013/08/adopting-a-cat.jpg"/>
</div>

CSS：

#tab-1[type=radio]:checked ~ img 
{
  height: 500px;
  width: 500px;
}

#tab-2[type=radio]:checked ~ img 
{
  height: 200px;
  width: 200px;
}

#tab-3[type=radio]:checked ~ img 
{
  height: 50px;
  width: 50px;
}

这可能对你有帮助..

Answer 2

我写了下面的javascript类，很好地解决了我的问题：）

function changeClass(){

var imgSize = document.getElementById("lastName").getAttribute("style");


var table;
if(document.getElementById('radio_firstname_lastname').checked == true) {

    table = document.getElementById('table_firstname_lastname');
} else {
    table = document.getElementById('table_lastname_firstname');
} 


if(document.getElementById('ImgSizeSmall').checked == true) {

    for (var r = 1; r < table.rows.length; r++) {
        var x = table.rows[r].cells.item(0);
        x.getElementsByTagName('img')[0].style.width="75px";

    }
} else if(document.getElementById('ImgSizeMedium').checked == true) {

    for (var r = 1; r < table.rows.length; r++) {
        var x = table.rows[r].cells.item(0);
        x.getElementsByTagName('img')[0].style.width="100px";

    }
}  else if(document.getElementById('ImgSizeLarge').checked == true) {

    for (var r = 1; r < table.rows.length; r++) {
        var x = table.rows[r].cells.item(0);
        x.getElementsByTagName('img')[0].style.width="150px";

    }
}

}

基于小型中型大型单选按钮选择重新调整图像大小：是否可以通过CSS？

2 个答案: