如何在Bokeh应用中修改单个Div组件文本大小且不影响其他Div？

Great question! To tweak the text size of just one Div component in your Bokeh app without messing with others, you’ve got two simple, effective approaches—let’s walk through them with code examples:

Method 1: Directly set via the style parameter #

This is the quickest way if you only need to adjust a single Div. You can pass a style dictionary when creating the Div, specifying the font-size property. This style is scoped exclusively to that Div, so others stay untouched:

from bokeh.models import Div
from bokeh.plotting import curdoc

# A standard-sized Div (uses default text size)
regular_div = Div(text="<p>This is a normal Div with default text size</p>")

# The Div with custom text size
custom_size_div = Div(
    text="<p>This Div has a bigger font size!</p>",
    style={"font-size": "24px"}  # Adjust this value to your desired size (e.g., "16px", "1.5em")
)

# Add both Divs to your app
curdoc().add_root(regular_div)
curdoc().add_root(custom_size_div)

Method 2: Use a custom CSS class #

If you might need to apply the same custom text size (or other styles) to multiple Divs later, this approach is more scalable. Define a custom CSS class, then assign it only to the Divs you want to modify:

from bokeh.models import Div, CustomCSS
from bokeh.plotting import curdoc

# Define your custom CSS class
custom_style = CustomCSS(
    css="""
    .custom-text-size {
        font-size: 20px;
        /* You can add extra styles here too, like font-weight or color */
    }
    """
)

# Add the custom CSS to your app's document
curdoc().add_root(custom_style)

# Standard Div (no custom styles)
regular_div = Div(text="<p>Regular text here, no changes</p>")

# Div using the custom CSS class
styled_div = Div(
    text="<p>Text with our custom size applied</p>",
    css_classes=["custom-text-size"]
)

curdoc().add_root(regular_div)
curdoc().add_root(styled_div)

Both methods ensure that only the target Div(s) get the text size change—all other Divs in your app will keep their default styling. If you’re working in a Jupyter Notebook instead of a standalone Bokeh app, just replace curdoc().add_root() with show() from bokeh.plotting to render the components.

内容的提问来源于stack exchange，提问作者LogCapy