Javascript 将类添加到不同的html页面

我很难将一个类应用到另一个页面。下面是一个场景：我正在设计一个页面，通过单击菜单中的链接将外部页面加载到该页面上。有了这个，我想加入一个“主题”按钮，当被选中时，它会从浅色主题变为深色主题。我遇到的问题是，甚至在脚本中调用类，将更改该类的背景，但不会更改正在显示的外部页面中的任何字体，并且在对象标记上还有一个白色边框

问题是，如何删除对象标记中的白色边框并影响正在加载到对象标记中的页面上的字体标记（h1、h2、p、li、a等？

下面是脚本的代码。外部页面由“ex_object”类标识：

$（'#变暗'）。单击（函数（）{
$（'html'）.toggleClass（“暗”）；
$（'.ex_object'）.toggleClass（“暗”）；
$（'#变暗'）。隐藏（“慢”）；
$（'点亮'）。显示（“慢”）；
$（'nav toggle header'）.css（'color'，'fff'）；
$（'.wrapper'）.css（'background'，'rgb（32,32,32'）；
$（'.sidemenu info'）.css（'background'，'rgb（32,32,32'）；
});
$（“#点亮”）。单击（函数（）{
$（'html'）.toggleClass（“暗”）；
$（'.ex_object'）.toggleClass（“暗”）；
$（'暗'）.show（“慢”）；
$（'#亮了'）。隐藏（“慢”）；
$（'nav toggle header'）.css（'color'，'000000'）；
});
$（“#导航切换标题”）。单击（函数（）{
$（'.wrapper'）.show（'slow'）；
$（'侧边栏'）.show（'慢'）；
});
$（“#导航切换菜单”）。单击（函数（）{
$（'.wrapper'）.hide（'slow'）；
});
下拉菜单
$（文档）.ready（函数（）{
$（'.tab链接'）。单击（函数（）{
var tab_id=$（this.attr（'data-tab'）；
$（'.tab link'）.removeClass（'current'）；
$（'.tab content'）.removeClass（'current'）；
$（“.wrapper”）.hide（“慢”）；
$（this.addClass（'current'）；
$（“#”+tab_id）.addClass（'current'）；
})
});

向CodePen或类似网站发布更完整的代码示例。代码示例有什么问题？这是一个脚本，当点击一个按钮时，它会将主题从亮切换到暗。你需要什么？我们不知道你如何加载你试图操纵的外部内容。我无法将其加载到CodePen，因为根据链接的不同，单击它将显示不同的页面。外部页面的“加载”部分不是问题。它装载没有问题。但我将在上面的编辑中向您展示一个代码示例。它是在上面添加的。

<script>
$('#darkend').click(function(){
$('html').toggleClass("dark");
$('.ex_object').toggleClass("dark");
$('#darkend').hide("slow");
$('#lightend').show("slow");
$('#nav-toggle-header').css('color','#fff');
$('.wrapper').css('background','rgb(32,32,32)');
$('.sidemenu-info').css('background','rgb(32,32,32)');
});

$('#lightend').click(function(){
$('html').toggleClass("dark");
$('.ex_object').toggleClass("dark");
$('#darkend').show("slow");
$('#lightend').hide("slow");
$('#nav-toggle-header').css('color','#000000');
});

$('#nav-toggle-header').click(function(){
$('.wrapper').show('slow');
$('#sidebar').show('slow');

});

$('#nav-toggle-menu').click(function(){
$('.wrapper').hide('slow');
});
</script>

<div class="wrapper">
<nav id="sidebar">
<section data-accordion>
<section id="menu_accordion" data-control>DROP MENU</section>
<div data-content>
<a href="#" class="tab-link" data-tab="tab-1"><li id="menu_accordion_sub"><span>TEST</span></li></a>
</section>
</nav>
</div>
<div class="main">
<div id="content">

<div id="tab-1" class="tab-content">
<object data="Pages/TEST.html" class="ex_object"></object>          
</div>
</div>
</div>


<script>
$(document).ready(function(){

$('.tab-link').click(function(){
var tab_id = $(this).attr('data-tab');

$('.tab-link').removeClass('current');
$('.tab-content').removeClass('current');
$(".wrapper").hide("slow");

$(this).addClass('current');
$("#"+tab_id).addClass('current');
})

});
</script>