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

Question

我正在开发一个小型主题设置面板，需要调整其设置。 该主题有许多人力车、d3 和 flot 图表，因此它在 js 脚本中设置样式，而不是通过 css 文件。 构建器使用 jQquery 交换整体主题 css 样式没有问题，但问题在于保持不变的浮动和图表。所以我尝试用另一个脚本替换脚本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

首先，JS 中的样式是邪恶的。如果您没有切换它的功能，则更是如此。更改元素的 src 属性可能会产生很多副作用，而且调试起来很麻烦。

您始终可以根据 CSS 属性设置样式，即使它是 SVG 或画布。在 SVG 中，您可以像引用 HTML 一样简单地引用元素，除非您将属性名称用作 CSS 属性。因此，例如，在大多数情况下，没有“背景颜色”而是“完整”，而不是“颜色”，您想使用“笔触颜色”等。在最坏的情况下，您可以通过创建临时隐藏元素并读取它们的 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 2

您是否尝试过以下方法来更改src 标记值？ 假设您要更改src 属性值onclick 的button。

function changeScriptSrc() {
    var scripts = document.getElementsByTagName("script");
    for ( var i = 0; i < scripts.length; ++ i ) {
       if ( scripts [i].src = "myfile1.js" ) {
          scripts [i].src = "new js file path";
          break;
       }
    }
}

<button onclick="changeScriptSrc();">Change Script Src</button>

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>