Using JQuery / JS & Select Boxes to change the stylesheet depending on the selection_问答_开发者

Using JQuery / JS & Select Boxes to change the stylesheet depending on the selection

开发者 https://www.devze.com 2023-02-26 18:55 出处：网络

Using JQuery / JS & Select Boxes to change the stylesheet depending on the selection I want the user to be able to, say, select \"Super Admin\" from a drop down select box and have the div that co

相关专题：css jquery

Using JQuery / JS & Select Boxes to change the stylesheet depending on the selection I want the user to be able to, say, select "Super Admin" from a drop down select box and have the div that contains the description of user level "Super admin" (located below the form) to change its

.superAdmin div {background-color: #000;}

I a开发者_JAVA百科ssume its some form of manipulation of the onChange(); handle.

Sorry if this questions is ridiculously low level, but I am a real beginner with JS, let along JQuery. +1 if you can also supply exactly how to implement the code (what to put in the <head></head> tags)

Thanks in advance, Huge supporter of this site (90% of all the issues I run into have already been asked here, I just couldnt find anything on this...)

Say you have a CSS stylesheet with the definition of all the classes you may want to add:

.user {background-color: #F00;}
.admin {background-color: #0F0;}
.superAdmin {background-color: #00F;}

and you have the HTML for your select box:

<select id="css-changer">
    <option></option>
    <option value="user">User</option>
    <option value="admin">Admin</option>
    <option value="superAdmin">Super Admin</option>
</select>

and for your divs:

<div id="user">User div</div>
<div id="admin">Admin div</div>
<div id="superAdmin">Super Admin div</div>

Then your javascript with jQuery would be:

$(document).ready(function() {
    $("#css-changer").change(function() {
        var value = $(this).find("option:selected").val();
        switch(value) {
            case "user":
                $("#user").addClass("user");
                $("#admin,#superAdmin").removeClass(); // removes all classes
                break;
            case "admin":
                $("#admin").addClass("admin");
                $("#user,#superAdmin").removeClass(); // removes all classes
                break;
            case "superAdmin":
                $("#superAdmin").addClass("superAdmin");
                $("#user,#admin").removeClass(); // removes all classes
                break;
        }
    });
});

You can see this working.

To get the JS and CSS in your page, create an external style sheet with the right definitions and include it as described by the spec with a tag like that below:

<link href="mystyle.css" rel="stylesheet" type="text/css">

and make sure to include jQuery and an external javascript file (to make things unobtrusive). To include them use HTML like that below:

<!-- jQuery goes first! -->
<script src="path/to/jQuery/CDN/jquery-min-1.5.1.js" type="text/javascript"></script>
<script src="myExternal.js" type="text/javascript"></script>

maybe

$("#div").change(function(){

    $("#div1").css("color", "red");

})

Using JQuery / JS & Select Boxes to change the stylesheet depending on the selection

精彩评论

关注公众号

热门标签

图文推荐

Using JQuery / JS & Select Boxes to change the stylesheet depending on the selection

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：