diff --git a/src/BootstrapBlazor.Server/Components/Samples/FullScreenButtons.razor b/src/BootstrapBlazor.Server/Components/Samples/FullScreenButtons.razor
new file mode 100644
index 00000000000..f20a46790e0
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/FullScreenButtons.razor
@@ -0,0 +1,18 @@
+@page "/fullscreen-button"
+@inject IStringLocalizer<FullScreenButtons> Localizer
+
+<h3>@Localizer["FullScreenButtonTitle"]</h3>
+
+<h4>@((MarkupString)Localizer["FullScreenButtonIntro"].Value)</h4>
+
+<DemoBlock Title="@Localizer["FullScreenButtonNormalTitle"]" Introduction="@Localizer["FullScreenButtonNormalIntro"]" Name="Normal">
+    <section ignore>
+        <ul class="ul-demo mb-3">
+            <li>@((MarkupString)Localizer["FullScreenTitleLi1"].Value)</li>
+            <li>@((MarkupString)Localizer["FullScreenTitleLi2"].Value)</li>
+        </ul>
+    </section>
+    <FullScreenButton Icon="fa-solid fa-font-awesome"></FullScreenButton>
+</DemoBlock>
+
+<AttributeTable Items="@GetAttributes()" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/FullScreenButtons.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/FullScreenButtons.razor.cs
new file mode 100644
index 00000000000..ed92f4139d7
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/FullScreenButtons.razor.cs
@@ -0,0 +1,52 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// 全屏按钮代码示例
+/// </summary>
+public partial class FullScreenButtons
+{
+    /// <summary>
+    /// GetAttributes
+    /// </summary>
+    /// <returns></returns>
+    private static AttributeItem[] GetAttributes() =>
+    [
+        new()
+        {
+            Name = nameof(FullScreenButton.Icon),
+            Description = "全屏图标",
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(FullScreenButton.FullScreenExitIcon),
+            Description = "退出全屏图标",
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(FullScreenButton.TargetId),
+            Description = "全屏元素 Id",
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(FullScreenButton.Text),
+            Description = "显示文字",
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        }
+    ];
+}
diff --git a/src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor b/src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor
index 7debdfe9890..04153a8d479 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor
@@ -7,15 +7,8 @@
 <h4>@((MarkupString)Localizer["FullScreensDescription"].Value)</h4>
 
 <DemoBlock Title="@Localizer["FullScreenNormalTitle"]" Introduction="@Localizer["FullScreenNormalIntro"]" Name="Normal">
-    <Button Text="@Localizer["FullScreenNormalButtonText1"]" OnClick="() => FullScreenService.Toggle()"></Button>
-</DemoBlock>
-
-<DemoBlock Title="@Localizer["FullScreenTitleTitle"]" Introduction="@Localizer["FullScreenTitleIntro"]" Name="Title">
     <section ignore>
-        <ul class="ul-demo mb-3">
-            <li>@((MarkupString)Localizer["FullScreenTitleLi1"].Value)</li>
-            <li>@((MarkupString)Localizer["FullScreenTitleLi3"].Value)</li>
-        </ul>
+        <div>@((MarkupString)Localizer["FullScreenOptionDesc"].Value)</div>
     </section>
-    <FullScreenButton Icon="fa-solid fa-font-awesome"></FullScreenButton>
+    <Button Text="@Localizer["FullScreenNormalButtonText1"]" OnClick="() => FullScreenService.Toggle()"></Button>
 </DemoBlock>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor.cs
new file mode 100644
index 00000000000..6af806f6347
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor.cs
@@ -0,0 +1,14 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// FullScreen Service
+/// </summary>
+public partial class FullScreens
+{
+
+}
diff --git a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
index d4c98de9bec..01de5dff64b 100644
--- a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
+++ b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
@@ -1182,6 +1182,12 @@ void AddNotice(DemoMenuItem item)
                     Url = "flip-clock"
                 },
                 new()
+                {
+                    IsNew = true,
+                    Text = Localizer["FullScreenButton"],
+                    Url = "fullscreen-button"
+                },
+                new()
                 {
                     Text = Localizer["Light"],
                     Url = "light"
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 8e78d65fdcc..2a2af746a92 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -2251,14 +2251,18 @@
   "BootstrapBlazor.Server.Components.Samples.FullScreens": {
     "FullScreensTitle": "FullScreen",
     "FullScreensDescription": "Human-computer interaction by injecting service calls <code>Show</code> method pop-ups",
-    "Tips": "This component provides functionality in the form of injection services, the user experience is very comfortable to use, anytime, anywhere calls, need to be built into the page using this component <code>FullScreen</code> component, or in the main layout component of <code>MainLayout</code>, the sample code is as follows:",
     "FullScreenNormalTitle": "Basic usage",
     "FullScreenNormalIntro": "The entire page is fully screened by calling the <code>Show</code> method that <code>FullScreenService</code> service instance",
     "FullScreenNormalButtonText1": "FullScreen",
-    "FullScreenTitleTitle": "Button",
-    "FullScreenTitleIntro": "The full screen of the entire web page is component <code>FullScreenButton</code>",
-    "FullScreenTitleLi1": "The button default icon can be set through the <code>ButtonIcon</code>, and the full-screen icon can be set through the <code>FullScreenIcon</code> property",
-    "FullScreenTitleLi3": "Use the <code>Text</code> property to set current page title"
+    "FullScreenOptionDesc": "You can set the full-screen window by setting <code>FullScreenOption</code>, and specify the page element by <code>ElementReference</code> <code>Id</code> <code>Selector</code>"
+  },
+  "BootstrapBlazor.Server.Components.Samples.FullScreenButtons": {
+    "FullScreenButtonTitle": "FullScreenButton",
+    "FullScreenButtonIntro": "Use the <code>FullScreenButton</code> component to make the entire web page or a specified element full screen",
+    "FullScreenButtonNormalTitle": "Basic usage",
+    "FullScreenButtonNormalIntro": "You can set the default icon of the button through <code>Icon</code>, and set the icon when exiting full screen through the <code>FullScreenExitIcon</code> property",
+    "FullScreenTitleLi1": "Set the fullscreen element ID through the <code>TargetId</code> parameter",
+    "FullScreenTitleLi2": "Set the current page title text through the <code>Text</code> property"
   },
   "BootstrapBlazor.Server.Components.Samples.Buttons": {
     "Title": "Button",
@@ -4923,7 +4927,8 @@
     "OtpInput": "OtpInput",
     "TotpService": "ITotpService",
     "VideoDevice": "IVideoDevice",
-    "AudioDevice": "IAudioDevice"
+    "AudioDevice": "IAudioDevice",
+    "FullScreenButton": "FullScreenButton"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index ae2eac1a317..1bdee0a05a2 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -2251,14 +2251,18 @@
   "BootstrapBlazor.Server.Components.Samples.FullScreens": {
     "FullScreensTitle": "FullScreen 全屏",
     "FullScreensDescription": "通过注入服务调用 <code>Show</code> 方法弹出窗口进行人机交互",
-    "Tips": "本组件使用注入服务的形式提供功能，使用时用户体验效果非常舒适，随时随地的调用，需要在使用本组件的页面中内置 <code>FullScreen</code> 组件，或者在 <code>MainLayout</code> 主布局组件中内置，示例代码如下：",
     "FullScreenNormalTitle": "基础用法",
     "FullScreenNormalIntro": "通过调用<code>FullScreenService</code> 服务实例的 <code>Show</code> 方法将整个网页进行全屏化",
     "FullScreenNormalButtonText1": "全屏",
-    "FullScreenTitleTitle": "按钮组件",
-    "FullScreenTitleIntro": "通过 <code>FullScreenButton</code> 组件将整个网页进行全屏化",
-    "FullScreenTitleLi1": "可通过 <code>ButtonIcon</code> 设置按钮默认图标，通过 <code>FullScreenIcon</code> 属性设置全屏时图标",
-    "FullScreenTitleLi3": "通过 <code>Text</code> 属性设置当前页标题文字"
+    "FullScreenOptionDesc": "通过设置 <code>FullScreenOption</code> 对全屏化的窗口进行设置，可通过 <code>ElementReference</code> <code>Id</code> <code>Selector</code> 指定页面元素"
+  },
+  "BootstrapBlazor.Server.Components.Samples.FullScreenButtons": {
+    "FullScreenButtonTitle": "FullScreenButton 全屏按钮",
+    "FullScreenButtonIntro": "通过 <code>FullScreenButton</code> 组件将整个网页或者指定元素进行全屏化",
+    "FullScreenButtonNormalTitle": "基础用法",
+    "FullScreenButtonNormalIntro": "可通过 <code>Icon</code> 设置按钮默认图标，通过 <code>FullScreenExitIcon</code> 属性设置退出全屏时图标",
+    "FullScreenTitleLi1": "通过 <code>TargetId</code> 参数设置全屏元素 Id",
+    "FullScreenTitleLi2": "通过 <code>Text</code> 属性设置当前页标题文字"
   },
   "BootstrapBlazor.Server.Components.Samples.Buttons": {
     "Title": "Button 按钮",
@@ -4923,7 +4927,8 @@
     "OtpInput": "验证码输入框 OtpInput",
     "TotpService": "时间密码验证服务 ITotpService",
     "VideoDevice": "视频设备服务 IVideoDevice",
-    "AudioDevice": "音频设备服务 IAudioDevice"
+    "AudioDevice": "音频设备服务 IAudioDevice",
+    "FullScreenButton": "全屏按钮 FullScreenButton"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",
diff --git a/src/BootstrapBlazor.Server/docs.json b/src/BootstrapBlazor.Server/docs.json
index 5d6a7e2ad57..b3dd5b46714 100644
--- a/src/BootstrapBlazor.Server/docs.json
+++ b/src/BootstrapBlazor.Server/docs.json
@@ -232,7 +232,8 @@
     "opt-input": "OtpInputs",
     "otp-service": "OtpServices",
     "video-device": "VideoDevices",
-    "audio-device": "AudioDevices"
+    "audio-device": "AudioDevices",
+    "fullscreen-button": "FullScreenButtons"
   },
   "video": {
     "table": "BV1ap4y1x7Qn?p=1",
diff --git a/src/BootstrapBlazor/Components/FullScreen/FullScreenButton.razor.cs b/src/BootstrapBlazor/Components/FullScreen/FullScreenButton.razor.cs
index 6425e54b2d5..525f73589d9 100644
--- a/src/BootstrapBlazor/Components/FullScreen/FullScreenButton.razor.cs
+++ b/src/BootstrapBlazor/Components/FullScreen/FullScreenButton.razor.cs
@@ -11,7 +11,7 @@ namespace BootstrapBlazor.Components;
 public partial class FullScreenButton
 {
     /// <summary>
-    /// 获得/设置 退出全屏图标 默认 fa-solid fa-maximize
+    /// 获得/设置 全屏图标 默认 fa-solid fa-maximize
     /// </summary>
     [Parameter]
     [Obsolete("已弃用，请使用 Icon 参数；Deprecated. Please use Icon parameter")]
diff --git a/src/BootstrapBlazor/Components/FullScreen/FullScreenOption.cs b/src/BootstrapBlazor/Components/FullScreen/FullScreenOption.cs
index a9b1da37287..349ad2cc3aa 100644
--- a/src/BootstrapBlazor/Components/FullScreen/FullScreenOption.cs
+++ b/src/BootstrapBlazor/Components/FullScreen/FullScreenOption.cs
@@ -19,4 +19,9 @@ public class FullScreenOption
     /// 获得/设置 要全屏的 HTML Element Id
     /// </summary>
     public string? Id { get; set; }
+
+    /// <summary>
+    /// 获得/设置 要全屏的 HTML css selector
+    /// </summary>
+    public string? Selector { get; set; }
 }
diff --git a/src/BootstrapBlazor/wwwroot/modules/fullscreen.js b/src/BootstrapBlazor/wwwroot/modules/fullscreen.js
index addbca44456..93ceb5bd14c 100644
--- a/src/BootstrapBlazor/wwwroot/modules/fullscreen.js
+++ b/src/BootstrapBlazor/wwwroot/modules/fullscreen.js
@@ -6,6 +6,9 @@ export async function toggle(options) {
     if (options.id) {
         el = document.getElementById(options.id);
     }
+    else if (options.selector) {
+        el = document.querySelector(options.selector);
+    }
     else if (isElement(options.element)) {
         el = options.element;
     }
diff --git a/test/UnitTest/Services/FullScreenServiceTest.cs b/test/UnitTest/Services/FullScreenServiceTest.cs
index fe7d91c216e..121d04e1678 100644
--- a/test/UnitTest/Services/FullScreenServiceTest.cs
+++ b/test/UnitTest/Services/FullScreenServiceTest.cs
@@ -88,9 +88,10 @@ public async Task Toggle_Ok()
     [Fact]
     public void FullScreenOption_Ok()
     {
-        var option = new FullScreenOption() { Element = new("test01", null), Id = "test" };
+        var option = new FullScreenOption() { Element = new("test01", null), Id = "test", Selector = "test-selector" };
         Assert.NotNull(option.Id);
         Assert.Null(option.Element.Context);
+        Assert.Null(option.Selector);
     }
 
     private class MockFullScreen : ComponentBase