如何用另一个脚本替换theme html中的脚本src？

Question

我正在使用小主题设置面板，需要调整其设置。 主题有很多人力车，d3和flot图表，因此它在js脚本中设置，而不是通过css文件。 构建器交换整体主题css样式没有问题jQquery，但问题是在flots和图表保持不变。所以我尝试用另一个脚本替换脚本src，但没有成功。

如果你们中的任何人都知道在特定元素点击中替换html文件中的脚本src的简单解决方案，那就太棒了。这对于主题设置面板来说也非常方便...解释视频：https://www.youtube.com/watch?v=6cl9XNYdP7g&feature=youtu.be

更新：

我尝试使用document.getElementById，但也没有成功。

已更新 settings.js

var site_settings = '<div class="ts-button">'
        +'<span class="fa fa-cog fa-spin"></span>'
    +'</div>'
    +'<div class="ts-body">'
        +'<div class="ts-title">Options</div>'
        +'<div class="ts-row">'
            +'<label class="check"><input type="checkbox" class="icheckbox" name="st_head_fixed" value="1"/> Fixed Header</label>'
        +'</div>'
        +'<div class="ts-row">'
            +'<label class="check"><input type="checkbox" class="icheckbox" name="st_sb_fixed" value="1" checked/> Fixed Sidebar</label>'
        +'</div>'
        +'<div class="ts-row">'
            +'<label class="check"><input type="checkbox" class="icheckbox" name="st_sb_scroll" value="1"/> Scroll Sidebar</label>'
        +'</div>'
        +'<div class="ts-row">'
            +'<label class="check"><input type="checkbox" class="icheckbox" name="st_sb_right" value="1"/> Right Sidebar</label>'
        +'</div>'
        +'<div class="ts-row">'
            +'<label class="check"><input type="checkbox" class="icheckbox" name="st_sb_custom" value="1"/> Custom Navigation</label>'
        +'</div>'
        +'<div class="ts-row">'
            +'<label class="check"><input type="checkbox" class="icheckbox" name="st_sb_toggled" value="1"/> Toggled Navigation</label>'
        +'</div>'
        +'<div class="ts-title">Layout</div>'
        +'<div class="ts-row">'
            +'<label class="check"><input type="radio" class="iradio" name="st_layout_boxed" value="0" checked/> Full Width</label>'
        +'</div>'
        +'<div class="ts-row">'
            +'<label class="check"><input type="radio" class="iradio" name="st_layout_boxed" value="1"/> Boxed</label>'
        +'</div>'
        +'<div class="ts-title">Themes</div>'
        +'<div class="ts-themes">'
            +'<a href="#" class="active" data-theme="css/theme-goblin.css"><img src="img/themes/green.png"/></a>'            
            +'<a href="#" data-theme="css/theme-forest.css"><img src="img/themes/brown.png"/></a>'
            +'<a href="#" data-theme="css/theme-dark.css"><img src="img/themes/dark.jpg"/></a>'                        
            +'<a href="#" data-theme="css/theme-night.css"><img src="img/themes/night.jpg"/></a>'            
            +'<a href="#" data-theme="css/theme-serenity.css"><img src="img/themes/serenity.jpg"/></a>'




        +'</div>'
    +'</div>';

var settings_block = document.createElement('div');
    settings_block.className = "theme-settings";
    settings_block.innerHTML = site_settings;
    document.body.appendChild(settings_block);

$(document).ready(function(){

    /* Default settings */
    var theme_settings = {
        st_head_fixed: 0,
        st_sb_fixed: 1,
        st_sb_scroll: 1,
        st_sb_right: 0,
        st_sb_custom: 0,
        st_sb_toggled: 0,
        st_layout_boxed: 0
    };
    /* End Default settings */

    set_settings(theme_settings,false);    

    $(".theme-settings input").on("ifClicked",function(){

        var input   = $(this);

        if(input.attr("name") != 'st_layout_boxed'){

            if(!input.prop("checked")){
                theme_settings[input.attr("name")] = input.val();
            }else{            
                theme_settings[input.attr("name")] = 0;
            }

        }else{
            theme_settings[input.attr("name")] = input.val();
        }

        /* Rules */
        if(input.attr("name") === 'st_sb_fixed'){
            if(theme_settings.st_sb_fixed == 1){
                theme_settings.st_sb_scroll = 1;
            }else{
                theme_settings.st_sb_scroll = 0;
            }
        }

        if(input.attr("name") === 'st_sb_scroll'){
            if(theme_settings.st_sb_scroll == 1 && theme_settings.st_layout_boxed == 0){
                theme_settings.st_sb_fixed = 1;
            }else if(theme_settings.st_sb_scroll == 1 && theme_settings.st_layout_boxed == 1){
                theme_settings.st_sb_fixed = -1;
            }else if(theme_settings.st_sb_scroll == 0 && theme_settings.st_layout_boxed == 1){
                theme_settings.st_sb_fixed = -1;
            }else{
                theme_settings.st_sb_fixed = 0;
            }
        }

        if(input.attr("name") === 'st_layout_boxed'){
            if(theme_settings.st_layout_boxed == 1){                
                theme_settings.st_head_fixed    = -1;
                theme_settings.st_sb_fixed      = -1;
                theme_settings.st_sb_scroll     = 1;
            }else{
                theme_settings.st_head_fixed    = 0;
                theme_settings.st_sb_fixed      = 1;
                theme_settings.st_sb_scroll     = 1;
            }
        }
        /* End Rules */

        set_settings(theme_settings,input.attr("name"));
    });

    /* Change CSS Theme */
    $(".ts-themes a").click(function(){
        $(".ts-themes a").removeClass("active");
        $(this).addClass("active");
        $("#theme").attr("href",$(this).data("theme"));
        return false;
    });
    /* END Change CSS Theme */

    /* Change JS Theme */
    $(".ts-themes a").click(function() {
    var theme = $(this).data("theme");
    $("script#graphs-theme").attr("src", theme);
    })
    /* END Change JS Theme */


    /* Open/Hide Settings */
    $(".ts-button").on("click",function(){
        $(".theme-settings").toggleClass("active");
    });


    /* End open/hide settings */
});





function set_settings(theme_settings,option){

    /* Start Header Fixed */
    if(theme_settings.st_head_fixed == 1)
        $(".page-container").addClass("page-navigation-top-fixed");
    else
        $(".page-container").removeClass("page-navigation-top-fixed");    
    /* END Header Fixed */

    /* Start Sidebar Fixed */
    if(theme_settings.st_sb_fixed == 1){        
        $(".page-sidebar").addClass("page-sidebar-fixed");
    }else
        $(".page-sidebar").removeClass("page-sidebar-fixed");
    /* END Sidebar Fixed */

    /* Start Sidebar Fixed */
    if(theme_settings.st_sb_scroll == 1){          
        $(".page-sidebar").addClass("scroll").mCustomScrollbar("update");        
    }else
        $(".page-sidebar").removeClass("scroll").css("height","").mCustomScrollbar("disable",true);

    /* END Sidebar Fixed */

    /* Start Right Sidebar */
    if(theme_settings.st_sb_right == 1)
        $(".page-container").addClass("page-mode-rtl");
    else
        $(".page-container").removeClass("page-mode-rtl");
    /* END Right Sidebar */

    /* Start Custom Sidebar */
    if(theme_settings.st_sb_custom == 1)
        $(".page-sidebar .x-navigation").addClass("x-navigation-custom");
    else
        $(".page-sidebar .x-navigation").removeClass("x-navigation-custom");
    /* END Custom Sidebar */

    /* Start Custom Sidebar */
    if(option && option === 'st_sb_toggled'){
        if(theme_settings.st_sb_toggled == 1){
            $(".page-container").addClass("page-navigation-toggled");
            $(".x-navigation-minimize").trigger("click");
        }else{          
            $(".page-container").removeClass("page-navigation-toggled");
            $(".x-navigation-minimize").trigger("click");
        }
    }
    /* END Custom Sidebar */

    /* Start Layout Boxed */
    if(theme_settings.st_layout_boxed == 1)
        $("body").addClass("page-container-boxed");
    else
        $("body").removeClass("page-container-boxed");
    /* END Layout Boxed */

    /* Set states for options */
    if(option === false || option === 'st_layout_boxed' || option === 'st_sb_fixed' || option === 'st_sb_scroll'){        
        for(option in theme_settings){
            set_settings_checkbox(option,theme_settings[option]);
        }
    }
    /* End states for options */

    /* Call resize window */
    $(window).resize();
    /* End call resize window */
}

function set_settings_checkbox(name,value){

    if(name == 'st_layout_boxed'){    

        $(".theme-settings").find("input[name="+name+"]").prop("checked",false).parent("div").removeClass("checked");

        var input = $(".theme-settings").find("input[name="+name+"][value="+value+"]");

        input.prop("checked",true);
        input.parent("div").addClass("checked");        

    }else{

        var input = $(".theme-settings").find("input[name="+name+"]");

        input.prop("disabled",false);            
        input.parent("div").removeClass("disabled").parent(".check").removeClass("disabled");        

        if(value === 1){
            input.prop("checked",true);
            input.parent("div").addClass("checked");
        }
        if(value === 0){
            input.prop("checked",false);            
            input.parent("div").removeClass("checked");            
        }
        if(value === -1){
            input.prop("checked",false);            
            input.parent("div").removeClass("checked");
            input.prop("disabled",true);            
            input.parent("div").addClass("disabled").parent(".check").addClass("disabled");
        }        

    }
}

Answer 1

您是否尝试过如下操作来更改src代码值？ 假设您要更改src的{​​{1}}属性值onclick。

button

Answer 2

首先，JS中的样式是邪恶的。如果没有切换功能，更是如此。更改元素的src属性可能会产生许多副作用，并且无法进行调试。

您始终可以根据CSS属性设置样式，即使它是SVG或画布。在SVG中，除了使用属性名称作为CSS属性之外，您可以简单地引用元素，就像它们是HTML一样。因此，例如，没有＆＃34;背景颜色＆＃34;但是＆＃34;完整＆＃34;而不是＆＃34;颜色＆＃34;你想使用＆＃34; stroke-color＆＃34;或者在大多数情况下。在最坏的情况下，您可以通过创建临时隐藏元素并读取其CSS属性来手动从JS中读取正确的CSS值。要更新值，请重新绘制图像。

如果您仍然坚持要更改元素的src，则应该这样做：

<script src="themes/blue.js" id="graphs-theme"></script>
....
<a href="#" class="themeswitch" data-theme="css/theme-forest.css">Link</a>
<script>
$(".themeswitch").click(function() {
    var theme = $(this).data("theme");
    $("script#graphs-theme").attr("src", theme);
})
</script>

Answer 3

document.getElementById("button").onclick=function(){ 
          document.getElementById("sc").src = "bcd";
            document.getElementById("divs").innerHTML=document.getElementById("sc").src ;
        };

        document.getElementById("divs").innerHTML=document.getElementById("sc").src;

            <html>
            <head>

            <script id="sc" src="abc"></script>

            </head>
            <body>
              <button id ="button"> click to change script src</button>
            <div id="divs"></div>

            </body>

            </html>